Question

玩一些jQuery的点点滴滴，我似乎无法理解它。我想要做的是遍历页面上的项目，并对它们应用自定义单击处理程序。这样，当我填充页面时，我只需要填写正确的ID，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");
    });
}); 
});

alert（teststr）给出了我期望的输出，但是当我绑定它时，它实际上是绑定到所有元素而不仅仅是每个循环的迭代中的单数项。

我做错了什么！？

干杯，

添

Answer 1

我做错了什么！？

你的变量都是全局的。

点击处理程序中的此代码：

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，并且设置{的值更为合适{1}}使用三元运算符而不是两个lightfunction语句。）

每个jQuery - 绑定到所有元素而不是单个

1 个答案: