Hover over ol and affect another specific element on same page with multiple versions

Question

I've been playing around with this for a while, but just can't figure it out.

But to be honest, I'm fairly new to javascript so this might be an obvious one.

I have an aside with a ol that you hover-over and affects a related image on the page. This works fine but I wanted to have multiple versions of this same component. One for events, another for articles etc.

If I hover over one component it affects the other.

Thanks for the help in advance.

Please see my 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");
          });
        });
    });

Please see my codepen http://codepen.io/veryrobert/pen/DjqLH

Answer 1

There are a ton of different ways to do this, but based on your layout you can specifically select the desired .list2 instead of both of them. Adding the currently hovered element is a simple matter.

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

find the parent div and then find the ul>li child you want to highlight.

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