在jQuery中循环按钮单击事件

Question

这个循环似乎不起作用，我不知道我哪里出错了，但会感激任何帮助。

 var j = 0; for (j = 0; j < 10; j++) { $('#btn-' + j).click(function() { alert(j); }); } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <button id='btn-0'>One</button> <button id='btn-1'>Two</button> <button id='btn-2'>Three</button> <button id='btn-3'>Four</button> 

基本上点击按钮它应该提醒循环的数字（对吗？），但它只是警告每个'10'？

已经很晚了，我知道我一定做错了什么，但我想不出来。

这是我的循环的小提琴： https ： //jsfiddle.net/p8v5sejr/

Answer 1

这是因为循环运行，然后当您单击按钮时， j等于10 。 由于您的值来自按钮的ID，因此您可以利用它来获得优势：

 var j = 0; for (j = 0; j < 10; j++) { $('#btn-' + j).click(function() { alert($(this).attr("id").split("btn-")[1]); }); } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <button id='btn-0'>One</button> <button id='btn-1'>Two</button> <button id='btn-2'>Three</button> <button id='btn-3'>Four</button> 

Answer 2

您可以从当前目标元素中获取id并解析索引。

 for (let index = 0; index < 4; index++) { $('#btn-' + index).click(function(e) { var value = parseInt(e.target.id.replace(/[\\D+]/g, ''), 10); alert(value); }); } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <button id='btn-0'>One</button> <button id='btn-1'>Two</button> <button id='btn-2'>Three</button> <button id='btn-3'>Four</button> 

Answer 3

这是关于功能范围和块范围

只需使用let声明i在for循环中

 // var j = 0; <-- Don't use var for (let j = 0; j < 10; j++) { // <-- use let $('#btn-' + j).click(function() { alert(j); }); } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <button id='btn-0'>One</button> <button id='btn-1'>Two</button> <button id='btn-2'>Three</button> <button id='btn-3'>Four</button> 

Answer 4

如果在函数中执行事件绑定，则会得到一个保持值的闭包。

 var j = 0; for (j = 0; j < 10; j++) { addClick(j); } function addClick(j) { $('#btn-' + j).click(function() { alert(j); }); } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <button id='btn-0'>One</button> <button id='btn-1'>Two</button> <button id='btn-2'>Three</button> <button id='btn-3'>Four</button> 

Answer 5

尝试这个，

$( "button[id^=btn]" ).each(function(index) {
    $(this).on("click", function(){
        var idvalue = $(this).attr('id'); 

        //alert(index);
        //or
        idvalue = idvalue.replace("btn-","");
        alert(idvalue);
    });
});