jQuery array questions

Within the click handlers that you are creating you're referencing a variable i that is defined outside the function and by the time the handler is called in reponse to a click i will be whatever is was at the end of the for loop rather than referencing the appropriate related element. You can fix this by introducing a closure:

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

When a JS function runs it has access to the variables in its containing scope even when that containing scope is a function that has already finished executing. So the anonymous function I've introduced above is called on each iteration of the for loop and its i parameter remains accessible to the function you were passing to .click().

(Note also your for condition should be i < arrayOne.length, not i<=arrayOne-1 - you can't subtract 1 from an array.)

Since you are using jQuery you can do this in a tidier manner:

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

In my opinion a better solution overall would be to dump the idea of using arrays. Relate the elements within your html structure somehow and then use DOM traversal methods within your click handler to find the related elements to show and hide. If you updated your question to show your approximate html structure I could advise further on this.

I think to in that case you can also use other way to achieve your target. You can find out their index value and use to target that for correspond divs.

See a 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');
});

​

This is a rather odd thing to want to do but if it's necessary then your loop approach is certainly viable. However you need to take measures to ensure that the event handler picks up on the correct value of i. As you have written it, the value of i at the time each handler fires will not necessarily be the value of i at the time the handler was put in place.

There are various ways to resolve this issue.

Closures

At each iteration of the loop, form a 'closure' which (a) captures the value of i and (b) returns a function that becomes the actual event handler.

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);
}

For clarity I have used n in the closure, in place of 'i'. It's maybe more typical, though not as clear, to use i all through.

.data()

You can use jQuery's .data() method to make DOM elements "aware" of their i value.

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();
     });
}

.each()

You can use the jQuery.each() method to form the loop.

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();
     });
});

This is probably the simplest approach. Although it looks different, it is actually very similar to forming closures but the detail is looked after by jQuery.

After following nnnnnn's suggestion, here's the final code I used to solve the problem- it works perfectly, and I can modify it as necessary to create similar sections in my markup, which is built for fluid responsiveness. One thing to note is that I couldn't use css sprites to create roll over states, as that would have involved some disadvantageous absolute positioning, so I decided to create the swap image effect in 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