जावास्क्रिप्ट

में कॉलिंग ऑब्जेक्ट और फ़ंक्शन के बीच का अंतर मैं दो फाइलों में लिख रहा हूं - एक HTML है और एक जावास्क्रिप्ट है। तो एक वस्तु कॉल करने के लिए मैंजावास्क्रिप्ट

document.getElementById("nameObj").onmouseover = changeMe;

करते हैं और JavaScript फ़ाइल में मैं

changeMe = function() 
{ 
//and here i write the function 
}

है, लेकिन अब मैं अपने कोड का अनुकूलन करने और उस में वस्तुओं के साथ एक समारोह कॉल करने के लिए कोशिश कर रहा हूँ। मैंने अनुभाग (उनमें से 4) बनाए और मैं onmouseover और onmouseout के साथ रंग बदलने की कोशिश कर रहा हूं। HTML का कोड है:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css"> 
     <script src="script.js"> </script> 
     <title> test 2</title> 
    </head> 
    <body> 
     <header> </header> 
     <div id="wrapper"> 
     <main> 
     <section class="mysection" id="section1"> </section> 
     <section class="mysection" id="section2"> </section> 
     <section class="mysection" id="section3"> </section> 
     <section class="mysection" id="section4"> </section> 
     </main> 
     <div class="clear"> </div> 
     </div> 
     <footer> </footer> 
       <script> 
      (function(){ 
       var sec = document.getElementsByClassName("mysection"); 
       for(var i=0; i<3; i++) 
       { 
        sec[i].onmouseover=changeMe(sec[i], i); 
        sec[i].onmouseout=changeBack(sec[i]); 
       } 
      })(); 
     </script> 
    </body> 
</html>

और यहाँ जेएस है:

function changeMe(t_section, count) 
{ 
    if(count==0) 
    { 
     t_section.style.background="yellow"; 
    } 
    if(count==1) 
    { 
     t_section.style.background="blue"; 
    } 
    if(count==2) 
    { 
     t_section.style.background="green"; 
    } 
    if(count==3) 
    { 
     t_section.style.background="red"; 
    } 
}; 

function changeBack(t_section) 
{ 
    t_section.style.background="gray"; 
};

लेकिन यह काम नहीं कर रहा। मैंने गलत क्या किया?

स्रोत

2015-12-25 user3488862

की संभावित डुप्लिकेट [जावास्क्रिप्ट बंद अंदर लूप - सरल व्यावहारिक उदाहरण] (http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple- व्यावहारिक उदाहरण) – MinusFour

इस कोड को अपनी स्क्रिप्ट टैग बदलें: घटना श्रोताओं के बारे में

(function(){ 
    var sec = document.getElementsByClassName("mysection"); 
    for(var i = 0; i < 4; i++) 
    { 
    sec[i].addEventListener('mouseover', function() { 
     var index = i; 
     return function() { 
     changeMe(sec[index], index); 
     }; 
    }()); 
    sec[i].addEventListener('mouseout', function() { 
     var index = i; 
     return function() { 
     changeBack(sec[index]); 
     }; 
    }()); 
    } 
})();

चेक here।
कृपया पूर्ण कार्य उदाहरण के लिए this बेवकूफ की जांच करें।

स्रोत

2015-12-25 14:41:46

'i' बाहरी दायरे से है, सभी ईवेंट हैंडलर 'सेक [2]' –

@hege_hegedus पर कैच बैक कॉल करेंगे नाइस कैच! यह नहीं देखा :) –

यह अभी भी गलत है –

यह:

sec[i].onmouseover=changeMe(sec[i], i); 
sec[i].onmouseout=changeBack(sec[i]);

आप onmouseover विधि करने के लिए एक समारोह वापसी मान निर्दिष्ट कर रहे हैं, फिर भी यह एक समारोह शरीर की उम्मीद है।

changeMe(sec[i], i); 
sec[i].onmouseover=undefined; 
changeBack(sec[i]); 
sec[i].onmouseout=undefined;

मूल रूप से, आप अपने कार्य तुरन्त अमल, और onmouse कॉलबैक करने के लिए अपरिभाषित आवंटित: अपने कार्यों कुछ भी वापस नहीं है के बाद से, यह करने के लिए बराबर है।

इसे ठीक करने के लिए, फ़ंक्शन बॉडी को कॉलबैक पर असाइन करें।

ऑप्टिमाइज़ेशन नोट, आपके दोनों फ़ंक्शंस स्वयं को पहले पैरामीटर के रूप में रखते हैं और इसकी वास्तव में आवश्यकता नहीं है क्योंकि आप हमेशा this का उपयोग करके ईवेंट तत्व का संदर्भ ले सकते हैं।

स्रोत

2015-12-25 14:42:19 Shomz

() ऑपरेटर (आमंत्रण ऑपरेटर) एक फ़ंक्शन कॉल करता है। तो आप मूल रूप से उन्हें सेट करने के बजाय हैंडलर को बुला रहे हैं। संचालकों को जोड़ने के लिए एक विकल्प है:

// Create a basic array 
var sections = [].slice.call(document.querySelectorAll(".mysection")); 
// using an array for setting the background colors 
var colors = ['yellow', 'blue', 'green', 'red']; 

function hover(event) { 
    var color = 'gray'; 

    if (event.type === 'mouseover') { 
     // get the index of the mouseovered element 
     // and use it for getting the corresponding color 
     color = colors[ sections.indexOf(this) ]; 
    } 

    this.style.background = color; 
} 

sections.forEach(function(el) { 
    el.addEventListener('mouseover', hover); 
    el.addEventListener('mouseout', hover); 
});

स्रोत

2015-12-25 14:59:28 undefined

जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे