jQuery数组问题

我有一个关于jQuery中数组的基本问题，但我被难住了- 我希望能够创建大量DOM元素数组，每个元素的索引号相等，访问它们的索引，然后根据该索引执行jQuery方法

例如，我想在第一个数组的成员I上执行一个单击操作，并以其他数组成员的对应I为目标。因此，在下面的示例中，单击arrayOne[1]只会影响arrayTwo[1]和ArrayTree[1]，单击arrayOne[2]只会影响arrayTwo[2]，ArrayTree[2]等等

我尝试过使用“for循环”、.each（）方法、.map（）并使用jQuery.each（）方法，但没有任何效果。要么影响所有键/值成员，要么只影响一个键/值成员。因为我尝试了很多东西，所以我给出了一个有代表性的问题集，而不是一个具体的问题集，希望这足以解决我的问题

var arrayOne=['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];

var arrayTwo=['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];

var arrayThree=['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];

for(i=0; i<=arrayOne.length-1; i++){ 
     $(arrayOne[i]).click(function(){
          $(arrayTwo[i]).show();
          $(arrayThree[i]).hide();
     });//click
}

var arrayOne=['.selectorOne_a'、'.selectorOne_b'、'.selectorOne_c']；
var arrayTwo=['.selectorTwo_a'、'.selectorTwo_b'、'.selectorTwo_c']；
var arrayThree=['.selectorThree_a'、'.selectorThree_b'、'.selectorThree_c']；
对于（i=0；i在您正在创建的单击处理程序中，您正在引用函数外部定义的变量
i
，当响应单击调用处理程序时，
i
将是
for
循环末尾的任何内容，而不是引用相应的相关元素。您可以修复通过引入一个闭包：

for(i=0; i < arrayOne.length; i++){
   (function(i){
      $(arrayOne[i]).click(function(){
          $(arrayTwo[i]).show();
          $(arrayThree[i]).hide();
      });
   })(i);
}

在我看来，一个更好的整体解决方案是放弃使用数组的想法。以某种方式将html结构中的元素关联起来，然后在单击处理程序中使用DOM遍历方法来查找要显示和隐藏的相关元素。如果您更新了问题以显示大致的html结构，我可以就此提供进一步建议。
我想在这种情况下，你也可以用其他方式来实现你的目标。
您可以找到它们的索引值，并使用它来确定相应div的索引值

见

​
 这是一件非常奇怪的事情，但是如果有必要，那么您的循环方法肯定是可行的。但是您需要采取措施确保事件处理程序选择正确的
i
值。正如您所写的，在每个处理程序启动时，
i
的值不一定是
i
处理程序就位时

解决这个问题有多种方法

闭包
在循环的每次迭代中，形成一个“闭包”，它（a）捕获
i
的值，（b）返回一个成为实际事件处理程序的函数

var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
for(i=0; i<=arrayOne.length-1; i++) {
     $(arrayOne[i]).on('click', function(n) {
          return function() {
              $(arrayTwo[n]).show();
              $(arrayThree[n]).hide();
          }
     })(i);
}

.each（）
您可以使用
jQuery.each（）
方法来形成循环

var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
$.each(arrayOne, function(i) {
     $(this).on('click', function() {
        $(arrayTwo[i]).show();
        $(arrayThree[i]).hide();
     });
});

这可能是最简单的方法。虽然它看起来不同，但实际上非常类似于形成闭包，但细节由jQuery处理。
在遵循NNNN的建议后，下面是我用来解决问题的最后一段代码-它工作得非常好，我可以根据需要修改它，在我的标记中创建类似的部分，需要注意的是，我不能使用css精灵来创建滚动状态，因为这会涉及一些不利的绝对定位，所以我决定在jQuery/javascript中创建交换图像效果

    function createClick2(){

    // clickElements are the clickable images which trigger all subsequent actions
    var clickElements= ['.subheader_li_header1 img','.subheader_li_header2 img','.subheader_li_header3 img'];

    //once clickElements are clicked, a specific list appears underneath each clickElement member. These lists are class members of the listShow array
    var listShow= ['.subheader_ul_anim1','.subheader_ul_anim2','.subheader_ul_anim3'];

    // when clickElements are hovered over, an image is swapped- this is the imgSwapOver array
    var imgSwapOver=['img/sidebar_create_over.png','img/sidebar_develop_over.png','img/sidebar_design_over.png'];

    //on mouse out, or double tap, (depending on the device) the image is swapped back in.
    var imgSwapUp=['img/sidebar_create_up.png','img/sidebar_develop_up.png', 'img/sidebar_design_up.png'];

    // counter for holding click information
    var clickCount=0;

    $.each(clickElements, function(i,val) {

        $(clickElements[i]).click(function(){ 
            clickCount++;
            if(clickCount==1){          
                $(listShow[i]).show('slow', function(){
                    $(this).css("display","block");
                    $(clickElements[i]).attr("src", imgSwapOver[i]);//concession for mobile browser

                });//show
            }//if
            else if(clickCount==2){
                $(listShow[i]).hide('slow', function(){
                    $(this).css("display","none");
                    });//hide
                $(clickElements[i]).attr("src", imgSwapUp[i]);//concession for mobile browser
                    clickCount=0;
            }//else if
                }).hover(function(){$(clickElements[i]).attr("src", imgSwapOver[i]); },function(){$(clickElements[i]).attr("src", imgSwapUp[i]); 

                });//hover          
    });//each
}//createClick2

没有什么比jQuery数组更好的了；你描述的是用文字符号创建的Javascript数组，或者
[]
arrayOne-1
这就是你拥有的还是
arrayOne.length-1
？对不起，应该是arrayOne.length-1…我不明白你为什么要发表这样的评论，Jared，因为我没有说明任何事情“jQuery数组。”我知道这些是javascript数组，但它们（希望）可以与jQuery方法结合使用。您的问题标题是“jQuery数组问题”"，所以这可能就是Jared的意思。无论如何，正如我在回答中提到的，将选择器存储在数组中并尝试将它们相互关联的整个方法可能不是实现这一点的最佳方法。如果您能展示一个html示例，我们可以建议一个更好的解决方案。此外，我得到的印象是，您正在使用类来识别单个元素-这就是id的用途（使用id在语义上更正确，效率更高）。可以使用
rel=“related el”
或
data sibling=“sibling id value”
。我同意，像这样使用
类
值似乎很愚蠢。谢谢，nnnnnn！正如我提到的，我正在使用你的$。每个方法都取得了成功。使用数组的原因是简单-我希望能够快速地将元素添加到数组中（它们的成员编号始终相等）然后有一个方法来处理任意数量的添加，而不是在方法中的某个地方添加它们，或者创建许多不同的方法，或者创建一个切换案例场景等等。如果您想解决我在这方面的编码逻辑错误，我洗耳恭听。
\u a
元素在html结构中是否相互关联
\u b
元素之间相互关联的方式是什么？我假设是这样，因为您对每组相关元素执行相同的单击处理。如果是这样，您就不需要数组，因为您可以使用DOM遍历方法（jQuery使这非常容易），如果您向html中添加更多元素，那么您的JS将自动拾取这些元素，而无需修改任何数组。这本身很好，但这是对另一个问题的回答。这种方法不能与指定jQuery选择器的
var arrayOne=[…]；
等方法混合使用。在上面的代码中，
$（This）.index（）
将在DOM中的同级元素之间返回元素的索引；它不会在
数组中恢复其索引。
谢谢，Beetroot Beetroot！非常有价值
var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
for(i=0; i<=arrayOne.length-1; i++) {
     $(arrayOne[i]).on('click', function(n) {
          return function() {
              $(arrayTwo[n]).show();
              $(arrayThree[n]).hide();
          }
     })(i);
}

var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
for(i=0; i<=arrayOne.length-1; i++) {
     $(arrayOne[i]).data('index', i).on('click', function() {
        var i = $(this).data('index');
        $(arrayTwo[i]).show();
        $(arrayThree[i]).hide();
     });
}

var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
$.each(arrayOne, function(i) {
     $(this).on('click', function() {
        $(arrayTwo[i]).show();
        $(arrayThree[i]).hide();
     });
});

    function createClick2(){

    // clickElements are the clickable images which trigger all subsequent actions
    var clickElements= ['.subheader_li_header1 img','.subheader_li_header2 img','.subheader_li_header3 img'];

    //once clickElements are clicked, a specific list appears underneath each clickElement member. These lists are class members of the listShow array
    var listShow= ['.subheader_ul_anim1','.subheader_ul_anim2','.subheader_ul_anim3'];

    // when clickElements are hovered over, an image is swapped- this is the imgSwapOver array
    var imgSwapOver=['img/sidebar_create_over.png','img/sidebar_develop_over.png','img/sidebar_design_over.png'];

    //on mouse out, or double tap, (depending on the device) the image is swapped back in.
    var imgSwapUp=['img/sidebar_create_up.png','img/sidebar_develop_up.png', 'img/sidebar_design_up.png'];

    // counter for holding click information
    var clickCount=0;

    $.each(clickElements, function(i,val) {

        $(clickElements[i]).click(function(){ 
            clickCount++;
            if(clickCount==1){          
                $(listShow[i]).show('slow', function(){
                    $(this).css("display","block");
                    $(clickElements[i]).attr("src", imgSwapOver[i]);//concession for mobile browser

                });//show
            }//if
            else if(clickCount==2){
                $(listShow[i]).hide('slow', function(){
                    $(this).css("display","none");
                    });//hide
                $(clickElements[i]).attr("src", imgSwapUp[i]);//concession for mobile browser
                    clickCount=0;
            }//else if
                }).hover(function(){$(clickElements[i]).attr("src", imgSwapOver[i]); },function(){$(clickElements[i]).attr("src", imgSwapUp[i]); 

                });//hover          
    });//each
}//createClick2