仅在 jQuery 函数内循环问题答案

【问题标题】：Looping inside jQuery function only issue仅在 jQuery 函数内循环问题
【发布时间】：2016-03-13 10:05:00
【问题描述】：

我在 Meteor 中使用 jQuery 时遇到了一些问题 - 我只是想学习，所以希望有人能提供帮助。

因此，当点击#addButton 时，它会将 div 附加到 .formField 中，并且在点击时创建的每个 div 都会有一个唯一的类，例如 formField[1]、formField[2] 等

问题是当按钮被点击而不是仅仅改变 div 的名字时，div 也被添加了 50 次。我知道它作为一个循环听起来有多愚蠢，但是我如何在点击时只循环 div 的类，以便每个类都有不同的名称？

我的代码如下：

Template.form.events({
'click #addButton': function(event) {

var i;
for (i = 0; i < 50; i++) {

$(".formField").append('<div class="formField['+i+']">.....</div>');
}

return false;

【问题讨论】：

根本不要使用循环。使用在函数外部定义的计数器变量，以便在调用之间保留其值。顺便说一句，“类”的概念并不自然地与“唯一”相关 - 你为什么不使用 id？
我现在觉得自己很笨，当然循环是行不通的。我只在示例中上过课，尽管关于 id 的情况你是对的

标签： javascript jquery html meteor

【解决方案1】：

如果我理解你在这里做什么，你就不需要循环了。每次单击按钮时，您只需要一个变量来递增。将您的追加从循环中取出，而是单击将您的变量增加一个，然后调用追加。不需要循环。

var i = 0;

Template.form.events({
    'click #addButton': function(event) {
         i += 1;

         $(".formField").append('<div class="formField['+i+']">.....</div>');
    }
});

return false;

【讨论】：

是的，我现在感觉很笨。我不知道为什么我认为循环是正确的
没问题，如果这有帮助，请接受作为答案。
添加了应该这样做的代码对不起我在移动设备上，所以标签等有点偏离

【解决方案2】：

这样做，（即通过创建一个闭包），点击运行验证

var uuid = 0;

$('#addButton').on('click', function (event) {
  uuid = uuid + 1;
  $(".formField").append('<div class="formField[' + uuid + ']">Form' + uuid + '</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="formField"></div>

<input type="button" value="Add New" id="addButton"></input>

【讨论】：