Question

我认为这是一个关于jQuery中数组的基本问题，但我很难过 - 我希望能够做的是创建一些DOM元素数组，每个元素的索引号相等，访问它们的索引，然后根据该索引执行jQuery方法。

例如，我想对第一个数组的成员i执行单击操作，并且我将针对其他数组成员的相应i。因此，在下面的示例中，单击arrayOne [1]只会影响arrayTwo [1]和arrayThree [1]，单击arrayOne [2]只会影响arrayTwo [2]，arrayThree [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
}

我意识到for循环不是这样做的正确方法，但它意味着我尝试过的代表性方法......应该简单，对吧？我不知道这是否属于多维数组的标题，哈希，你有什么，所以任何关于导航这些概念的教程的建议或链接都会受到高度赞赏。我希望这是有道理的，我很感激任何建议。

谢谢！

Answer 1

在您创建的单击处理程序中，您引用了在函数外部定义的变量i，并且在响应单击i时调用处理程序的时间将是在for循环的末尾，而不是引用适当的相关元素。你可以通过引入一个闭包来解决这个问题：

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

当JS函数运行时，它可以访问其包含范围中的变量，即使包含范围的变量是已经完成执行的函数。因此，我在上面介绍的匿名函数在for循环的每次迭代时被调用，并且其i参数仍然可以被传递给.click()的函数访问。

（另请注意，for条件应为i < arrayOne.length，而不是i<=arrayOne-1 - 您无法从数组中减去1。）

由于您使用的是jQuery，因此可以以更整洁的方式执行此操作：

$.each(arrayOne, function(i,val) {
     $(arrayOne[i]).click(function(){
          $(arrayTwo[i]).show();
          $(arrayThree[i]).hide();
     });
});

在我看来，总体上更好的解决方案是抛弃使用数组的想法。以某种方式关联html结构中的元素，然后在单击处理程序中使用DOM遍历方法来查找要显示和隐藏的相关元素。如果您更新了问题以显示您的大致html结构，我可以进一步建议。

Answer 2

我认为在这种情况下你也可以用其他方式来实现你的目标。您可以找到它们的索引值，并使用它来定位对应的div。

查看simple Demo

<div class="Array1">
    <div class="selectorOne_a">Array1 a</div>
    <div class="selectorOne_b">Array1 b</div>
    <div class="selectorOne_c">Array1 c</div>
</div>
<div class="Array2">
    <div class="selectorTwo_a">Array2 a</div>
    <div class="selectorTwo_b">Array2 b</div>
    <div class="selectorTwo_c">Array2 c</div>
</div>
<div class="Array3">
    <div class="selectorThree_a">Array2 a</div>
    <div class="selectorThree_b">Array2 b</div>
    <div class="selectorThree_c">Array2 c</div>
</div>

Jquery ccode

$(".Array1 div").click(function() {
   index = $(this).index();
   $(".Array2 div:eq("+ index +")").css('background-color','red');//You can do show/hide or add class etc.
   $(".Array3 div:eq("+ index +")").css('background-color','green');
});

Answer 3

这是一件非常奇怪的事情，但如果有必要，那么你的循环方法肯定是可行的。但是，您需要采取措施以确保事件处理程序选择正确的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);
}

为清楚起见，我在闭包中使用n代替'i'。 i可能更为典型，但不是很清楚。

。数据（）

您可以使用jQuery的.data()方法让DOM元素“了解”其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();
     });
}

。每个（）

您可以使用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来处理。

Answer 4

在遵循nnnnnn的建议之后，这是我用来解决问题的最终代码 - 它完美运行，我可以根据需要修改它，在我的标记中创建类似的部分，这是为流体响应性而构建的。有一点需要注意的是，我无法使用css sprites来创建翻转状态，因为这会涉及一些不利的绝对定位，所以我决定在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数组问题

4 个答案:

闭包

。数据（）

。每个（）