CODEWITHSUNDEEP
javascriptjqueryarraysfunction
asebold
asebold

Reputation: 335

How to use arrays in javascript to match up divs when event fires?

I have a set of two divs - First set: when people mouse over these divs, it will fire an event, Second set: when the event is fired, these divs will be displayed. When you mouse over a div in the first set, it should display its corresponding div in the second set. I thought an easy way to match the mouseover divs with the correct div to display would be using arrays. I've been able attach the event listeners properly, but I can't figure out how to set it up so that when you mouseover one object of an array, it displays the array object with the same index number. I think if I could figure out how to recoginze the index number of the object I am mousing over, I could get it to work. I've tried a lot of things, but haven't been able to create anything that works. Here's the code: 

<script>
$(document).ready(function(){


//create array of divs to mouse over 
var ar = new Array();
ar[0] = $("#home"); 
ar[1] = $("#doc");

var length = ar.length;

//create array of divs to display when event is fired 
var des = new Array();
des[0] = $("#homeDes");
des[1] = $("#docDes");


// start for
for ( var i = 0; i< length; ++i )
{
ar[i].bind("mouseover",function(){$(des[i]).css("display","block");});
ar[i].bind("mouseout",function(){$(des[i]).css("display","none");});
} 
//end for

}); 
//end 

</script>

Upvotes: 0

Views: 1034

Answers (3)

robbmj
robbmj

Reputation: 16516

$(document).ready(function(){


   //create array of divs to mouse over 
   var ar = new Array();
   ar[0] = $("#home"); 
   ar[1] = $("#doc");

   var length = ar.length;

   //create array of divs to display when event is fired 
   var des = new Array();
   des[0] = $("#homeDes");
   des[1] = $("#docDes");


   // start for
   for ( var i = 0; i< length; ++i )
   {
       // WRAP THE BODY OF THE FOR LOOP IN A FUNCTION
       function(index) {
           ar[index].bind("mouseover",function() {
               $(des[index]).css("display","block");}
           );
           ar[index].bind("mouseout",function() {
               $(des[index]).css("display","none");
           });
       }(i);
   } 
   //end for

});

When the events are fired the value of i is the length of the array, you have to pass the value of i to another function so that in each function scope the value of index will be the value of i when it was called.

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71384

I would tend toward making a more flexible approach to this so that you don't need to change your javascript when you change your HTML. Consider classing your elements that need to have the bindings and providing data attribute to specify the target. Your HTML for divs to be bound might look like this:

<div id="home" class="mouseoverToggleTrigger" data-target="#homeDes">...</div>

And the jQuery might look like this:

$(document).ready(function(){

    $('.mouseoverToggleTrigger').hover(function() {
        var $target = $($(this).data('target'));
        $target.toggle();
    }
});

Note this is assuming you are using HTML5 for which jQuery, by default, converts data-* into values retrievable via data().

For pages that are not HTML5, this more generalized solution will work

$(document).ready(function(){

    $('.mouseoverToggleTrigger').hover(function() {
        var $target = $($(this).prop('data-target'));
        $target.toggle();
    }
});

One additional bit of flexibility this gives, is that you now don't have to limit yourself to a one-to-one trigger to target mapping. You could specify a class name or other jQuery selector for data-target values to get highly customized behavior, such as one trigger toggling all elements of a certain class that are children of another class.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

A simpler approach code wise is to give the common elements common classes and then use jQuery index() and eq() to match pairings

HTML

<a id="home" class="hoverMe">
<a id="doc" class="hoverMe">

<div id="homeDes" class="content">
<div id="docDes" class="content">

JS

var $content=$('.content')
var $links=$('.hoverMe').hover(function(){
    $content.eq( $links.index(this) ).show()

},function(){
     $content.eq( $links.index(this) ).hide()
})

index() API Docs

eq() API Docs

Upvotes: 0

Related Questions