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

Question

$(document).ready(function() {

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

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

});

此代码为无效。

问题来自哪里？

Answer 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/