通过按 Id 调用数组元素来循环它们

Posted 2023-05-09

【中文标题】通过按 Id 调用数组元素来循环它们

【英文标题】：Looping over Array Elements By Calling them by Id

【发布时间】：2011-06-26 08:50:23

【问题描述】：

如何遍历一个包含 5 个元素的数组。我有 5 个元素，其 id 为 imgone、imgtwo、imgthree、imgfour、imgfive。

var ids =
[ 
    "#imgone",
    "#imgtwo",
    "#imgthree",
    "#imgfour",
    "#imgfive"
]; 
for (var i = 0; id = ids[i]; i++)
  
    $(id).click(function() 

        $("#cell1,#cell2,#cell3,#cell4,#cell5").hide(); 
         $("#cell" + (i+1)).show(); 

    );

);

然后我有一个 5 个标签元素，比如

<a href="#"  id="imgone"><img src ="myimage1" /></a>    
<a href="#"  id="imgtwo"><img src ="myimage2" /></a>    
<a href="#"  id="imgthree"><img src ="myimage3" /></a>    
<a href="#"  id="imgfour"><img src ="myimage4" /></a>    
<a href="#"  id="imgfive"><img src ="myimage5" /></a> 

cell1、cell2、et-al 是我需要显示/隐藏元素的 onclick 的块。

顺便说一句，此代码始终隐藏所有单元格块并显示 cell6，这在我的代码中不存在。 我的意思是 $("#cell" + (i+1)).show(); 从不将 i 的值设为 0、1、2、3 或 4。

那么我如何遍历一个数组并显示隐藏我的单元格。我认为$(id).click(function()这行代码有问题但不知道是什么？？？

【参考方案1】：

这是一个闭包问题，变量i指向循环中使用的i，在执行的时候总是6。

改用此代码

for (var i = 0; id = ids[i]; i++)
  
    var fnc = function(j)
        return function() 
            $("#cell1,#cell2,#cell3,#cell4,#cell5").hide(); 
            $("#cell" + (j+1)).show();
        ;
    (i);
    $(id).click(fnc);

有关 javascript 闭包的更多信息，请参阅How do JavaScript closures work?

【参考方案2】：

你可以查询它：

var ids =
[ 
    "#imgone",
    "#imgtwo",
    "#imgthree",
    "#imgfour",
    "#imgfive"
]; 
$(ids.join(,)).each(function(i)
    $(this).click(function()
        $("#cell1,#cell2,#cell3,#cell4,#cell5").hide(); 
        $("#cell" + (i+1)).show();
    );
);

【讨论】：

$(this).click(function() 控件永远不会进入这个函数。顺便说一句，这个函数参数是什么

i 是被迭代元素的索引。在api.jquery.com/each 上查看更多信息。为什么说这行不通？

因为它没有，但它应该。为什么我说控制永远不会进入这个函数，因为当我在 $(this).click(function .... 它没有被执行。你试过了吗？？跨度>

你用的是什么版本的jquery？

我不知道在 jquery 的女巫版本中引入了选择器数组选择器 ($([selector1,selector2,...selectorn]) )，因此您可以尝试使用选择器用逗号分隔：$(selector1,selector2,..selectorn).see update