पाश के लिए जावास्क्रिप्ट चरणीय दायरा

Question

मैं नीचे दिए गए लूप के अंदर i चर तक पहुंच कैसे बनाए रखूं? मैं सीखने की कोशिश कर रहा हूं, न सिर्फ जवाब प्राप्त करें, इसलिए थोड़ा सा स्पष्टीकरण बहुत उपयोगी होगा। धन्यवाद!

var el, 
    len = statesPolyStrings.length; 

for (var i = 0; i < len; i++) { 
    el = document.getElementById(statesPolyStrings[i]); 

    google.maps.event.addDomListener(el, 'mouseover', function() { 
     $("#"+statesPolyStrings[i]).addClass("highlight"); 
     statesPolyObjects[i].setOptions({ strokeWeight: '2' }); 
    }); 
} 

Answer 1

आपके सभी कॉलबैक समान i चर साझा करते हैं।
जब ईवेंट हैंडलर वास्तव में चलता है, i सरणी के अंत के बाद होता है।

आपको लूप बॉडी को स्व-चालान समारोह में लपेटने की आवश्यकता है जो पैरामीटर के रूप में i लेता है।
इस तरह, प्रत्येक पुनरावृत्ति को अपना, अपरिवर्तनीय, i चर मिलेगा।

उदाहरण के लिए:

for (var i = 0; i < statesPolyStrings.length; i++) { 
    (function(i) { 
     ... 
    })(i); 
} 

Answer 2

for (var i = 0; i < statesPolyStrings.length; i++) { 
    (function(i){ 
     google.maps.event.addDomListener(document.getElementById(statesPolyStrings[i]), 'mouseover', function() { 
     $("#"+statesPolyStrings[i]).addClass("highlight"); 
     statesPolyObjects[i].setOptions({ strokeWeight: '2' }); 
     }); 
    })(i) 
} 

Answer 3

स्व-प्रेरक कार्यों के साथ चाल ठीक काम करता है: यह एक नया गुंजाइश बनाता है (हो सकता है 'कार्यों जावास्क्रिप्ट में विषय-क्षेत्र' के लिए गूगल) और इसलिए i एक अलग रूप में संभालती है परिवर्तनीय और आपके ईवेंट श्रोता कॉलबैक फ़ंक्शन के लिए सही मान प्रदान करता है।

लेकिन आप वास्तव में अपने तत्व फिर से के रूप में आप पहले से ही यह करने के लिए और अपने समारोह के अंदर एक घटना श्रोता सौंपा आप this के साथ अपने तत्व के लिए संदर्भ है jQuery के साथ खोजने की जरूरत नहीं है।

और जैसा कि आप jQuery किसी भी तरह का उपयोग कर रहे हैं, यह सही सूचकांक को खोजने के लिए तो आसान है (अपने i) $.inArray() अपने तत्व की आईडी और statesPolyStrings सरणी गुजर साथ statesPolyObjects का (यह मानते हुए आप अनन्य आईडी के साथ काम कर रहे हैं। अगर नहीं, $("#"+statesPolyStrings[i]) भी असफल हो जाएगा, क्योंकि इसे पहले पाता है)।

var el; 

for (var i = 0, len = statesPolyStrings.length; i < len; i++) { 
    el = document.getElementById(statesPolyStrings[i]); 

    google.maps.event.addDomListener(el, 'mouseover', function(event) { 
     $(this).addClass("highlight"); 
     statesPolyObjects[$.inArray(this.id, statesPolyStrings)]. 
      setOptions({ strokeWeight: '2' }); 
    }); 
} 

आप अभी भी स्व-प्रेरक फ़ंक्शन के साथ रहना आप किसी भी तरह से निम्न पंक्ति बदलना चाहिए चाहते हैं:

("#"+statesPolyStrings[i]).addClass("highlight"); 

$(this).addClass("highlight"); 

लिए आपके पास पर्याप्त से परिचित नहीं हैं, तो this और ऐसी घटनाएं जिन्हें आप इस लेख को पढ़ना चाहेंगे: http://www.sitepoint.com/javascript-this-event-handlers/

आपने देखा होगा कि मैंने अज्ञात कॉलबैक फ़ंक्शन के अंदर event भी तर्क लिखा था। console.log इस ईवेंट को आप किसी भी ईवेंट श्रोता कॉलबैक फ़ंक्शन के साथ मुफ्त में वितरित करने का प्रयास करें और उन सभी अन्य चीज़ों का पता लगाएं जिन्हें आप एक्सेस कर सकते हैं। उदाहरण के लिए, आप वास्तविक तत्व को event.target पर क्लिक कर सकते हैं (जैसा कि वास्तविक माउसओवर आपके तत्व के बच्चे के साथ हो सकता है)। तो:

google.maps.event.addDomListener(el, 'mouseover', function(event) { 
    console.log(event); 
    ... 

और देखने के लिए क्या घटना बचाता है अपने ब्राउज़र के कंसोल खोलें ...

ध्यान रखें कि google.maps.event.addDomListenerdocument.body.addEventListener पर कुछ अलग करता है और ब्राउज़र के बीच भी अंतर होता है। उदाहरण के लिए jQuery.on() ईवेंट ऑब्जेक्ट में कुछ अलग चीज़ें भी प्रदान करता है, लेकिन वहां आप कम से कम सभी ब्राउज़रों में एक ही डेटा पर भरोसा कर सकते हैं।