Question

我有一系列按钮，其中包含按钮的ID。然后我循环遍历它们并添加一个单击监听器。似乎我可以在没有使用.each()或其他内容的for循环的情况下执行此操作，但我无法使用.each()

var settingScreenButtons = ["btn_1","btn_2","btn_3","btn_4"];

for(var i=0;i<settingScreenButtons.length;i++){
        $("#"+settingScreenButtons[i]).click(function(){
            alert($(this).attr("id"));

        });
    }

Answer 1

您可以在一个jQuery对象中选择多个元素并一次绑定到它们：

$("#btn_1, #btn_2, #btn_3, #btn_4").click(function() {
    alert(this.id);
});

虽然如果你有更少的事件监听器会更好。说你的HTML看起来像这样：

<div id="container">
    <a href="#" id="btn_1" class="btn">Button 1</a>
    <a href="#" id="btn_2" class="btn">Button 2</a>
    <a href="#" id="btn_3" class="btn">Button 3</a>
    <a href="#" id="btn_4" class="btn">Button 4</a>
</div>

您可以使用jQuery的事件委派来更有效地解决这个问题：

$('#container').on('click', '.btn', function() {
    alert(this.id);
});

或者，如果您在问题中确实需要该表单，那么可以使用each，但它必须是$.each：

$.each(settingScreenButtons, function(index, id) {
    $('#' + id).click(function() {
        alert(this.id);
    });
});

Answer 2

这是另一个选项，从id名称数组开始：

var settingScreenButtons = ["btn_1","btn_2","btn_3","btn_4"];

$("#" + settingScreenButtons.join(", #")).click(function() {
    alert(this.id);
});

改进这个Jquery代码

2 个答案: