JQuery hover toggle related selector

Question

I have a list of images and separate list where each item is related to an image. Is it possible to have a hover event that fades the related image in and out using JQuery? Ie when you hover over listid-1, image-1 fades in.

This is the best I could do:

 $(document).ready(function(){ $( ".options li" ).hover(function( event ) { $('.image-' + (this - ".listid")).toggleFade( "300" ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class='images'> <img class='image-1' src='1.jpg'> <img class='image-2' src='2.jpg'> <img class='image-3' src='3.jpg'> <img class='image-4' src='4.jpg'> <img class='image-5' src='5.jpg'> </div> <div class="options"> <nav> <ul> <li class='listid-1'>One</li> <li class='listid-2'>Two</li> <li class='listid-3'>Three</li> <li class='listid-4'>Four</li> <li class='listid-5'>Five</li> </ul> </nav> </div> </div> 

Answer 1

You have a couple of issues. Firstly concatenating the this reference with a string isn't going to give you a valid selector. Secondly, the method name is fadeToggle() , not toggleFade() .

To fix the problems you could first group the li and img elements by giving them all the same respective classes, then relate the hovered li to the img by their indexes, something like this:

 $(document).ready(function() { $(".options .listid").hover(function(event) { $('.image').eq($(this).index()).fadeToggle("300"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class='images'> <img class='image' src='1.jpg'> <img class='image' src='2.jpg'> <img class='image' src='3.jpg'> <img class='image' src='4.jpg'> <img class='image' src='5.jpg'> </div> <div class="options"> <nav> <ul> <li class='listid'>One</li> <li class='listid'>Two</li> <li class='listid'>Three</li> <li class='listid'>Four</li> <li class='listid'>Five</li> </ul> </nav> </div> </div> 

Answer 2

You can get class of current li and split at - to get number and use it as selector for image.

 $('img').hide() $(".options li").hover(function() { $('.image-' + ($(this).attr('class').split('-')[1])).fadeToggle("300"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class='images'> <img class='image-1' src='1.jpg' alt="1"> <img class='image-2' src='2.jpg' alt="2"> <img class='image-3' src='3.jpg' alt="3"> <img class='image-4' src='4.jpg' alt="4"> <img class='image-5' src='5.jpg' alt="5"> </div> <div class="options"> <nav> <ul> <li class='listid-1'>One</li> <li class='listid-2'>Two</li> <li class='listid-3'>Three</li> <li class='listid-4'>Four</li> <li class='listid-5'>Five</li> </ul> </nav> </div> </div> 

If you have multiple classes on images instead you can use data attributes to select images.

 $('img').hide() $(".options li").hover(function() { $('img.image-' + $(this).data('img')).fadeToggle(300) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class='images'> <img class='image-1' src='1.jpg' alt="1"> <img class='image-2' src='2.jpg' alt="2"> <img class='image-3' src='3.jpg' alt="3"> <img class='image-4' src='4.jpg' alt="4"> <img class='image-5' src='5.jpg' alt="5"> </div> <div class="options"> <nav> <ul> <li data-img="1" class='listid-1'>One</li> <li data-img="2" class='listid-2'>Two</li> <li data-img="3" class='listid-3'>Three</li> <li data-img="4" class='listid-4'>Four</li> <li data-img="5" class='listid-5'>Five</li> </ul> </nav> </div> </div>