每個jQuery - 綁定到所有元素而不是單個元素

玩過一些jQuery零碎的東西，我似乎無法完全理解它。我正在做的是循環瀏覽頁面上的項目，併爲它們應用自定義點擊處理程序。這樣當我填充頁面時，我只需要填寫正確的ID並且jQuery可以自動填充鏈接。每個jQuery - 綁定到所有元素而不是單個元素

我遇到的問題是兩個事件都是用相同的輸出觸發，我無法弄清楚爲什麼。我有2，我使用的按鈕，

<img id="LightButton11Of" src="images/lightbulb_off.png" style="width:32px; 
height:32px; vertical-align:middle " alt="off" > 
<img id="LightButton11On" src="images/lightbulb_on.png" style="width:32px; 
height:32px; vertical-align:middle" alt="on">

和下面的代碼

$(document).ready(function(){ 
$("[id^=LightButton]").each(function(i,item){ 
    if ($(this).attr('id').substr(13,2)=="On"){lightfunction="1";} 
    if ($(this).attr('id').substr(13,2)=="Of"){lightfunction="0";} 
    alert($(this).attr('id').substr(13,2)); 
    numLight = $(this).attr('id').substr(11,2); 
    strLight = "*1*" + lightfunction + "*" + numLight + "##"; 

    teststr = $(item).attr('id') + " - " + strLight;   
    alert(teststr); 

    $(this).bind("click",function(){ 
     SendEvent("OWN","18",strLight,"OK"); 
    }); 
}); 
});

警報（teststr）給出確切我期待的輸出，但它似乎當我綁定它實際上是綁定到所有元素，而不是每個循環迭代中的單數項。

我在做什麼錯了！？

乾杯，

Tim。

來源

2014-12-31 emtark

我在做什麼錯了！

您的變量都是全球性的。

這段代碼在單擊處理程序：

SendEvent("OWN","18",strLight,"OK");

...指全球變量strLight，這將在你的.each()循環的最後一次迭代中設置的值。

您應該聲明所有變量爲var，這將使它們成爲函數的本地，所以每個點擊處理程序將從其包含的作用域使用局部變量。（其中，由於封閉的「神奇」，將仍然存在，即使您的每次回調都會被點擊事件發生的時間已經結束了。）

$("[id^=LightButton]").each(function(i,item){ 
    var lightfunction = this.id.substr(13,2)=="On" ? "1" : "0"; 
    var numLight = this.id.substr(11,2); 
    var strLight = "*1*" + lightfunction + "*" + numLight + "##"; 

    $(this).bind("click",function(){ 
     SendEvent("OWN","18",strLight,"OK"); 
    }); 
});

（另請注意，有沒有必要使用$(this).attr('id')時this.id給你的方式，更快輸入，讀取並執行相同的值，它的整潔使用三元運算符，而不是兩個if語句來設置lightfunction值）。

來源

2014-12-31 04:52:59 nnnnnn

完美:)我本來整個字符串創建時沒有任何變量，並通過引入全局測試來使問題變得更糟，現在我可以回到它了！ – emtark

我建議你總是用'var'聲明所有變量，即使是全局變量（在任何函數之外使用'var'聲明）。這樣一來，總是清楚應該有什麼範圍變量，很明顯，你已經有目的地創建了全局變量，而不是意外地將'var'放在一個函數中。 – nnnnnn

每個jQuery - 綁定到所有元素而不是單個元素

回答

相關問題