Question

尝试使用循环创建多个侦听器。如何使它工作？

var buttons = ['one', 'two', 'tree'];
$.each(keys, function(key, value) {
    $(value).click(function() {
        // do something
    });
});

另外，当我只需要值时，有没有写key, value的快捷方式？

Answer 1

如果你想通过循环使其工作，那么你可以使用

var buttons = ['.one', '.two', '.three'];

// ---------------- with -------- $.each();

$.each( buttons, function(key, value) {
    $(value).click(function() {
        // ------------- Do something
    });
});


// ------------------ with ----------- for loop


for( var i=0 ; i < buttons.length ; i++ )
{
    $(buttons[i]).click(function({
    // ------------- Do something
    });
}

但是为什么要这一轮如果只想分配事件

$('.one, .two, .three, #one, #two, #three').click(function() {
     // ------------- Do something
});

或者如果有变量

var buttons = '.one, .two, .three, #one, #two, #three';
$(buttons).click(function() {
     // ------------- Do something
});

这就是没有钥匙，没有价值，没有，没有每个

Answer 2

最好将委托事件监听器放在父级上，而不是遍历每个按钮。例如，如果您将所有<button>元素放在标识为<div>的{{1}}内，那么您可以像这样编写您的监听器：

#container

现在，每次在该div中单击一个按钮元素时，都会调用您的回调。您还可以使用类选择器代替$('#container').on('click', 'button', function() { // do something; });来仅侦听具有该类的元素。

Answer 3

在jQuery中，您可以一起选择一些元素，并使用冒号，

分隔它们

var buttons = ['one', 'two', 'tree'];
$(buttons.join()).click(function(){
  // Do something
})

在这个例子中我使用join将数组转换为one,two,three然后我将一个事件监听器添加到所有这些元素

Answer 4

听起来你最好将点击处理程序分配给具有特定类名的按钮，而不是迭代选择器列表并在循环内分配新函数。

<button class='my-button' id="one">
  One
</button>
<button class='my-button' id="two">
  Two
</button>
<button class='my-button' id="three">
  Three
</button>

和JS

$('.my-button').click(function() {
    var id = $(this).attr('id');
    $('body').append("<div>Button " + id + " was clicked</div>");
});

看看这个小提琴https://jsfiddle.net/4e7rk10L/

Answer 5

如果你真的想要循环（这是你的问题），你可以这样做：

for(var i=0;i<buttons.length;i++)
  $(buttons[i]).click(function({
    // Do something
  })

使用循环创建多个事件侦听器

5 个答案: