जावास्क्रिप्ट - गतिशील पाश

में ऑनक्लिक ईवेंट आवंटित मैं js कोड के साथ बहुत ही सरल html पृष्ठ है:जावास्क्रिप्ट - गतिशील पाश

<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 

     <div id="divButtons"> 

     </div> 

     <script type="text/javascript"> 
      var arrOptions = new Array(); 

      for (var i = 0; i < 10; i++) { 
       arrOptions[i] = "option" + i; 
      } 

      for (var i = 0; i < arrOptions.length; i++) { 
       var btnShow = document.createElement("input"); 
       btnShow.setAttribute("type", "button"); 
       btnShow.value = "Show Me Option"; 
       var optionPar = arrOptions[i]; 
       btnShow.onclick = function() { 
        showParam(optionPar); 
       } 

       document.getElementById('divButtons').appendChild(btnShow); 
      } 

      function showParam(value) { 
       alert(value); 
      }   
     </script> 
    </body> 
</html>

कि पेज 10 बटन बांधता है, लेकिन जब आप किसी भी बटन पर क्लिक करें यह हमेशा सतर्क "option9" को दर्शाता है। संवाददाता विकल्प दिखाने के लिए ऑनक्लिक घटना को कैसे संभव है!

धन्यवाद! शब्दशः

showParam(optionPar);

स्रोत

2011-02-18 ihorko

आप कुछ इस तरह करना होगा:

btnShow.onclick = (function(opt) { 
    return function() { 
     showParam(opt); 
    }; 
})(arrOptions[i]);

स्रोत

2011-02-18 10:26:25

वास्तव में यहां क्या हो रहा है? यह मेरे लिए भी काम करता था, लेकिन मैं भी समझना चाहता हूं :-) – MartinElvar

@MartinElvar उन्होंने एक फ़ंक्शन बनाया जो तर्क चुनते हैं, फिर जब हम (...) (arrOptions [i]) लागू करते हैं तो यह ऑप्ट-इन करने के लिए पास हो जाता है और फिर जब हम btnShow पर क्लिक करते हैं तो इस फ़ंक्शन को सेट किए गए पैराम के साथ बुलाया जाता है। – Yehonatan

एक बेहतर तरीका, जो भ्रमित नहीं है, नोड के "डेटा" विशेषता का उपयोग कर रहा है, और फिर इस.data को फ़ंक्शन के पैरामीटर के रूप में उपयोग कर रहा है। यहां एक उदाहरण दिया गया है: 'btnShow.data = arrOptions [i]; btnShow.onclick = function() { शोपाराम (this.data); } ' –

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

समस्या को हल करने की कोशिश कर रहे सबसे अच्छा जैसे टुकड़ा फिर से लिखकर द्वारा हल किया जाता है:

 window.onload = function() { 
      var folderElement; 
      tagFolders = document.getElementById("folders"); 
      for (i = 0; i < folders.length; i++) { 
       folderElement = folderButtons[i]; 
       folderElement = document.createElement("button"); 
       folderElement.setAttribute("id", folders[i]); 
       folderElement.setAttribute("type", "button"); 
       folderElement.innerHTML = folders[i]; 
       if (typeof window.addEventListener !== "undefined") { 
        folderElement.addEventListener("click", getFolderElement, false); 
       } else { 
        folderElement.attachEvent("onclick", getFolderElement); 
       } 
       tagFolders.appendChild(folderElement); 
      }

जो तत्व से कुछ भी प्राप्त कर सकते हैं:

  btnShow.value = "Show Me Option"; 
      var optionPar = arrOptions[i]; 
      btnShow.optionPar = optionPar; 
      btnShow.onclick = function(e) { 
       // if I'm not mistaking on how to reference the source of the event. 
       // and if it would work in all the browsers. But that's the idea. 
       showParam(e.source.optionPar); 
      }

स्रोत

2011-02-18 10:26:52

मैं एक ईवेंट हैंडलर देते हैं जिसने घटना को ट्रिगर किया:

// This function is the event handler for the folder buttons. 
function getFolderElement(event) { 
    var eventElement = event.currentTarget; 
    updateFolderContent(eventElement.id); 
}

इस मामले में आपको तत्व के अंदर विकल्प एम्बेड करना होगा/टैग मेरे मामले में मैं आईडी का उपयोग करता हूं।

स्रोत

2014-07-17 19:15:28

jQuery के लिए

, API से जोड़ने घटना डेटा अनुभाग में देखें:

... 
for (var i = 0; i < arrOptions.length; i++) { 

    $('<input id="btn" type="button" value="Show Me Option"><input>').appendTo("#divButtons") 

    $('#btn').bind("click", { 
     iCount: i}, 
    function(event) { 
     showParam(arrOptions[iCount]); 
    }); 
}

स्रोत

2014-08-14 14:06:28 Roman

आप कार्य करने के लिए बस चर के संदर्भ गुजरती हैं, नहीं यह मूल्य है। इसलिए हर बार लूप को फिर से चालू किया जाता है, यह आपके अज्ञात फ़ंक्शन का संदर्भ निर्दिष्ट करता है और उनमें से सभी स्मृति में समान मान को इंगित करते हैं। लेकिन चूंकि आप लूप में एक ही चर नाम का उपयोग करते हैं, इसलिए आप चर के मान को ओवरराइट करते हैं। आप वैरिएबल को इसके मान को संरक्षित करने के लिए एक स्ट्रिंग में संयोजित कर सकते हैं। ऐसे ही उदाहरण के लिए:

btnShow.onclick = new Function("", "showParam(" + arrOptions[i] + ");");

पहले पैरामीटर समारोह का नाम है लेकिन afaik यह वैकल्पिक है (यह खाली छोड़ दिया है या बिल्कुल छोड़ा जा सकता है)।

स्रोत

2015-04-25 15:51:28 StanE

स्वीकार्य उत्तर काम करता प्रतीत होता है, लेकिन यह भ्रमित करने वाला और कुछ करने के लिए कुछ बोझिल तरीका प्रतीत होता है। शायद उस तत्व के लिए डेटा विशेषता का उपयोग करने का एक बेहतर तरीका हो सकता है जिसके लिए आप ईवेंट श्रोता को असाइन करना चाहते हैं। यह समझना आसान है, समझने में आसान है, और कम कोड है। यहां एक उदाहरण दिया गया है:

btnShow.data = arrOptions[i]; 

btnShow.onclick = function() { 
    showParam(this.data); 
}

स्रोत

2016-05-02 13:23:27

स्वीकृत उत्तर सही है लेकिन मुझे लगता है कि कोई वास्तविक स्पष्टीकरण नहीं किया गया था।

मुझे समझाने की कोशिश करें, यहां मुद्दा शास्त्रीय गायब बंद है।

चर 'i' पाश यात्रा, और प्रति 1 की वृद्धि हो रही है पर क्लिक करें घटना वास्तव में क्रियान्वित नहीं किया जा रहा है, चाहे केवल एक तत्व के लिए आवेदन किया है, यह arrOptions की लंबाई पर निर्भर संक्षेप में प्रस्तुत हो रही जो 10

तो, पाश तक जारी है 'मैं' 10 तब है, जब भी पर क्लिक करें ईवेंट को ट्रिगर किया जा रहा है, यह है जो मैं के मान से 10

अब लेता है, समाधान के लिए, समाधान में हम एक बंद करने का उपयोग कर रहे हैं, ताकि जब हम ऑन-क्लिक पूर्व में 'i' के मान को लागू करते हैं एक तत्व के एनटी, यह वास्तव में समय पर मुझे सही मूल्य मिलता है।

ऑनक्लिक ईवेंट के भीतरी समारोह को बंद करने की है जहां यह संदर्भ देता पैरामीटर (arrOptions [i]), जिसका अर्थ क्या वास्तविक मैं चर सही समय पर है बनाएँ।

फ़ंक्शन अंततः उस मान को सुरक्षित रूप से बंद कर देता है, और फिर ऑन-क्लिक ईवेंट निष्पादित होने पर इसके संबंधित मान को वापस कर सकता है।

स्रोत

2017-01-23 21:21:47

जावास्क्रिप्ट - गतिशील पाश

उत्तर

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