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

Posted

技术标签:

【中文标题】通过按 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

以上是关于通过按 Id 调用数组元素来循环它们的主要内容,如果未能解决你的问题,请参考以下文章

React Axios API 调用与数组循环给出错误的顺序?

PHP数组参数按值,在通过引用循环数组项时被修改

JavaScript 基础 学习

JavaScript 基础 学习

向字符串数组中的元素添加数字值

如何通过匹配xslt中的id来确定元素的级别?