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()); 
   });
});

供参考：Microsoft docs

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

1 个答案: