將鼠標懸停在ol上，並在多個版本的同一頁上影響另一個特定元素

Question

我一直在玩這個遊戲一段時間，但無法弄清楚。

但說實話，我是相當新的JavaScript，所以這可能是一個明顯的。

我有一個唾手可得的ol，會影響頁面上的相關圖像。 這工作正常，但我想有這個相同的組件的多個版本。一個用於事件，另一個用於物品等。

如果我將鼠標懸停在一個組件上，它會影響另一個組件。

感謝您的幫助提前。

請參閱我codepen http://codepen.io/veryrobert/pen/DjqLH

HTML

<div class="wrap"> 

<aside class="aside"> 
    <ol class="list1"> 
    <li class="item1"><a href="">Lorem ipsum dolor sit amet.</a></li> 
    <li class="item2"><a href="">Lorem ipsum dolor sit amet.</a></li> 
    <li class="item3"><a href="">Lorem ipsum dolor sit amet.</a></li> 
    </ol> 
</aside> 

<ul class="list2"> 
    <li class="item1"><a href=""> 
    <img src="http://placekitten.com/100/140" alt="" /></a> 
    </li> 
    <li class="item2"><a href=""> 
    <img src="http://placekitten.com/100/140" alt="" /></a> 
    </li> 
    <li class="item3"><a href=""> 
    <img src="http://placekitten.com/100/140" alt="" /></a> 
    </li> 
</ul> 

</div> 

jQuery的

$('.list1 li').each(function(){ 
     $(this).hover(function() { 
      var index = $(this).index(); 
      $(".list1, .list2").each(function() { 
      $("li", this).eq(index).toggleClass("active"); 
      }); 
     }); 
    }); 

請參閱我codepen http://codepen.io/veryrobert/pen/DjqLH

Answer 1

有一噸的迪菲的租用方式來做到這一點，但根據您的佈局，您可以專門選擇所需的.list2而不是兩者。添加當前懸停的元素是一件簡單的事情。

http://codepen.io/anon/pen/vuwKb

var index = $(this).index(); 
$(this).closest(".aside").next().find("li") 
    .eq(index).add(this).toggleClass("active"); 

Answer 2

請檢查驗證碼筆，如果它解決您的疑問 http://codepen.io/anon/pen/CxnAw

Answer 3

http://codepen.io/anon/pen/jhyiK

尋父div，然後找到你想要突出ul>li孩子。

$('ol li').hover(function() { 
     var index = $(this).index(); 
     $(this).parents("div").find("ul li").eq(index).toggleClass("active");  
});