如何在for循环中使用“点击功能”？答案

【问题标题】：How to use "click function" in the for loop?如何在for循环中使用“点击功能”？
【发布时间】：2019-12-08 15:59:09
【问题描述】：

$(document).ready(function() {

    for (i=1;i<= 12;i++) {

        $(".panel" + i).click(function() {
           $("#panel").val($(".for-panel" + i).text()); 
        });
    }

});

此代码不起作用。

问题出在哪里？

【问题讨论】：

这能回答你的问题吗？ onClick event in a For loop
@AlonEitan 这是关于数组的问题！
这可能是closures in loops 的副本，详情请参阅那里的答案。但是请注意，在您的情况下，您的代码正在成为我所说的The Horror of Implicit Globals 的牺牲品。您需要声明i。除非您需要支持 IE11 及更早版本，否则请使用 for (let i = 1...
另一种方法可能是避免完全设置如此多的 onclick 事件处理程序，而是使用 jQuery 的 on() 方法定义单个“委托”事件：... $('body').on('click','[class^=panel]', function(ev){...})。

标签： javascript jquery

【解决方案1】：

这里的 for 循环首先运行，并在执行结束时将 i 的值更新为 13。但是$(".panel" + i).click()里面的函数只有在点击按钮后才会触发。届时i 的值将是13。

您可以通过使用 jquery data- 属性来避免这种情况。

HTML

<button class="panel" data-id="1">Panel1</button>
<button class="panel" data-id="2">Panel2</button>
<button class="panel" data-id="3">Panel3</button>
.
.
<button class="panel" data-id="13">Panel13</button>

jQuery

$(document).ready(function() {
   $(".panel").click(function() {
       var i = $(this).data('id');
       $("#panel").val($(".for-panel" + i).text()); 
   });
});

供参考：https://api.jquery.com/data/

【讨论】：