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(...)
}

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

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

Answer 2

您的代码中的小变化：替换此行

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

BY

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

Answer 3

在循环运行之后才会触发您的mousedown代码，因此您始终会分配最后一个对象。这有效： jsFiddle example 。

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

您还可以将当前的box变量发送给侦听器函数：

$(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')});
            }
        });
    }
});

DEMO

如何在循环中使用jQuery .on（）方法，而不会覆盖我循环的对象

6 个答案: