javascript - onclick 函数不在 javascript for 循环内重复

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我想动态重复 jquery 函数 n 次。警报正在针对计数次数起作用，但函数没有创建那么多次。我的代码如下

        var count = 5;
        var i = 1;
        for (var i = 1; i <= count; i++)
        {
            var min = ".min" + i;
            alert(min); // Just for testing purpose, working good
            document.writeln(min); // Just for testing purpose, working good
            alert(i); // Just for testing purpose, working good

            // Following function does not get repeated, 
            $(document).ready(function () {
                $("min" + i).click(function () {
                    alert(i);
                });
            });
        }

我的body部分代码如下

 <div class="min1"> Test - 1 </div>
 <div class="min2"> Test - 2 </div>
 <div class="min3"> Test - 3 </div>
 <div class="min4"> Test - 4 </div>

这可能看起来很简单，但我需要有人指导才能完成。请帮助我让它发挥作用。这只是我将在我的项目中大量实现的一个概念。提前致谢。

Answer 1

虽然代码中的问题是 closure in a loop 的错误使用.

解决方案可能有所不同，您可以对所有元素使用通用的点击处理程序，然后使用 data-* 属性来存储点击处理程序中所需的动态值。

$(document).ready(function() {
  $(".min").click(function() {
    alert($(this).data('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="min1 min" data-id="1">Test - 1</div>
<div class="min2 min" data-id="2">Test - 2</div>
<div class="min3 min" data-id="3">Test - 3</div>
<div class="min4 min" data-id="4">Test - 4</div>