javascript - 如何在循环中使用 jQuery .on() 方法，而不覆盖我循环的对象

Question

我必须将 mousedown 事件分配给对象集合。

但是 .on() 方法似乎每回合都会覆盖我的对象。

这是我的代码中的一个非常简化的示例。

Javascript：

$(document).ready(function() {
    var myArray = {
        0: {"id": "box1", "color": "blue"},
        1: {"id": "box2", "color": "green"}
    };

    for (i in myArray) {
        box = $('div#'+myArray[i]['id']);
        color = myArray[i]['color'];
        box.data('color', color);
        box.on({
            mousedown: function() {
                var color = myArray[i]['color'];
                $(this).css({'background': $(this).data('color')});
                myArray[i]['color'] = (i==0) ? "orange" : "pink";
            }
        });
    }
});

和 HTML：

​<div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
</div>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​另外，你可以在这里看到它的行动：http: //jsfiddle.net/ae3En/ 6/

希望有人可以帮助我，谢谢。

Answer 1

因为您box在函数中使用（并且box是在外部定义的）。因此，它将始终引用最后一个绑定框。.on与具体无关。有几种方法可以解决这个问题，但最简单的是：

mousedown: function () {
   $(this).css(...)
}

编辑：我不完全确定为什么它只使用变量中的最后一种颜色。我能够通过使用将预期的颜色绑定到 div 本身来解决这个问题.data。希望此解决方案对您有用：

http://jsfiddle.net/ae3En/5/

Answer 2

代码中的小改动：替换此行

box.css({'background': myArray[i]['color']});

经过

  $(this).css({'background': myArray[i]['color']});

Answer 3

直到循环运行后才会触发 mousedown 代码，因此您始终分配最后一个对象。这有效：jsFiddle 示例。

var myArray = {
    "0": { "id": "box0","color": "blue" },
    "1": {"id": "box1", "color": "green" }
};
$('#container div').each(function(i) {
    $(this).on({
        mousedown: function() {
            $(this).css({
                'background': myArray[i]['color']
            });
        }
    })
});​

Answer 4

您可以使用它.each来迭代数组并避免所有范围问题：

$.each(myArray, function(i, obj) {
    $('div#'+obj['id']).on({
        mousedown: function() {
            $(this).css({'background': obj['color']});
        }
    });
}

Answer 5

您还可以将当前框变量发送到侦听器函数：

$(document).ready(function() {
    var myArray = {
        "0": {"id": "box1", "color": "blue"},
        "1": {"id": "box2", "color": "green"}
    };
    function listener(box,i)
    {
        box.on({
            mousedown: function() {
                box.css({'background': myArray[i]['color']});
            }
        });
    }
    for (i in myArray) {

        var box  = $('div#'+myArray[i]['id']);
        listener(box,i);

    }
});

Answer 6

$(document).ready(function() {
    var myArray = {
        "0": {"id": "box1", "color": "blue"},
        "1": {"id": "box2", "color": "green"}
    };

    for (i in myArray) {
        var box = $('div#'+myArray[i]['id']);
        var color = myArray[i]['color'];
        box.data('color', color);

        box.on({
            mousedown: function() {
                $(this).css({'background': $(this).data('color')});
            }
        });
    }
});

​</p>

演示