0

我正在尝试while在我的 Javascript 中创建一个循环。

到目前为止，我有这个：

<script>
    $(document).ready(function(){       
        var i=0;
        while (i<9999) {
            $(".add_new_item_field" + i).hide();    
        $(".add_new_item_button" + i).click(function(){
            $(".add_new_item_field" + i).slideToggle("slow");
        });
        i++;
        }
    });
</script>

目标是使这项工作：

<div class="add_new_item_button1"></div>
<div class="add_new_item_button2"></div>
<div class="add_new_item_button3"></div>
...
<div class="add_new_item_field1">Show me something</div>
<div class="add_new_item_field2">Show me something</div>
<div class="add_new_item_field3">Show me something</div>
...

但由于某种原因，它不起作用。我在这里错过了什么吗？

4

4 回答 4

1

我猜这i不是您期望它在处理程序中的样子，因为当处理程序执行时i已经达到了 9999 的最大值。要解决这个问题，您需要将变量带入处理程序闭包，例如：

var i=0;
while (i<9999) {
    $(".add_new_item_field" + i).hide();  
    $(".add_new_item_button" + i).click((function(i) {
        // i is now saved in this closure
        return function() {
            $(".add_new_item_field" + i).slideToggle("slow");
        };
    }(i)));
    i++;
}

旁注：我不太确定这是在这里解决您的实际任务的最佳方法，但循环和附加 9999 事件处理程序似乎没有必要......

于 2012-11-22T14:07:50.473 回答
1

您的问题是$(".add_new_item_field" + i).slideToggle("slow");当您单击其中一个 div 时会发生该行中的连接。然而，设置处理程序的循环是很久以前运行的，并且i已经具有9999. 使用@David 演示的闭包来避免这种情况。

但是，我觉得这是错误的做法。设置 10000 个点击处理程序并执行 20000 个 jQuery 选择确实会使您的页面非常非常慢。对按钮使用一个公共类，对字段使用一个公共类。如果您不能依赖特定的文档顺序，请给它们唯一的 id 以相互引用 - 但不是类。

然后用一行 CSS 隐藏所有字段，并使用按钮的事件委托来触发 1 个函数，该函数通过 id 从附加到单击按钮的数据中查找字段。

<style>
    .add_new_item_field { display:none; }
</style>
<!-- placing the stylesheet here also avoids flickering.
Even better would be of course if it was written dynamically by JS, for not 
hiding the fields in clients that do not support JavaScript -->
<script src=/"jquery.js"></script>
<script>
jQuery(function($) {
    $(document).on("click", ".add_new_item_button", function(e) {
        var id = "field"+$(this).data("field");
        $('#'+id).show();
    });
});
</script>
<div class="add_new_item_button" data-field="1"></div>
<div class="add_new_item_button" data-field="2"></div>
<div class="add_new_item_button" data-field="3"></div>
...
<div class="add_new_item_field" id="field1">Show me something</div>
<div class="add_new_item_field" id="field2">Show me something</div>
<div class="add_new_item_field" id="field3">Show me something</div>
...
于 2012-11-22T14:08:45.197 回答
0

我认为您以错误的方式使用课程。您可以将单击处理程序分配给同一类的所有对象。但是您正在尝试将类说明符用作 ID，并尝试将处理程序分配给每个单独的对象。您不会对链接/网址的行为和布局做同样的事情吗？（链接）你会吗？

阅读：jQuery：如何向类添加单击处理程序并找出单击了哪个元素？

您想为一个类设置处理程序，将您的 div 指定为该类。我没有滥用类说明符作为某种 ID。

于 2012-11-22T14:13:40.830 回答
-1

您正在单击处理程序中创建一个闭包，该闭包捕获 i 变量，而不是它的值。这意味着所有点击函数都将包含值 9999，它是 while 循环结束时变量的值。

您可以通过创建一个设置为单击处理程序的函数来修复它。

var setClick = function(index) {
   $(".add_new_item_button" + index).click(function(){
   $(".add_new_item_field" + index).slideToggle("slow");
   }
}

并在您的 while 循环中使用它。

while (i<9999) {
    $(".add_new_item_field" + i).hide();    
    setClick(i);
    i++;
    }

现在 i 的值被您的点击处理程序正确捕获

于 2012-11-22T14:14:20.203 回答