每个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 - 绑定到所有元素而不是单个元素

回答

相关问题