jQuery的懸停切換相關的選擇器

Question

我有一個圖像列表和一個單獨的列表，其中每個項目都與圖像相關。 是否有可能發生懸停事件，從而使用JQuery使相關圖像淡入淡出？ 即，當您將鼠標懸停在listid-1上時，image-1會淡入。

這是我能做的最好的事情：

 $(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

您有幾個問題。 首先， this引用與字符串連接起來不會為您提供有效的選擇器。 其次，方法名稱是fadeToggle() ，而不是toggleFade() 。

要解決問題，您可以首先將li和img元素賦予各自相同的類，從而對li和img元素進行分組，然后通過其索引將懸停的li與img關聯起來，如下所示：

 $(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

您可以獲取當前li類並在-拆分以獲取數字並將其用作圖像的選擇器。

 $('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> 

如果圖像上有多個類，則可以使用data屬性選擇圖像。

 $('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>