0

私はしばらくこれで遊んでいますが、それを理解することはできません.

しかし、正直なところ、私は JavaScript にかなり慣れていないので、これは明らかなことかもしれません。

私は、あなたがカーソルを合わせて、ページ上の関連する画像に影響を与える ol を脇に置いています。これは正常に機能しますが、この同じコンポーネントの複数のバージョンが必要でした。1 つはイベント用、もう 1 つは記事用などです。

1 つのコンポーネントにカーソルを合わせると、他のコンポーネントに影響します。

事前に助けてくれてありがとう。

私の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>

Jクエリ

$('.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をご覧ください

4

3 に答える 3

1

これを行うにはさまざまな方法がありますが、レイアウトに基づいて、.list2両方ではなく目的の方法を具体的に選択できます。現在ホバーされている要素を追加するのは簡単なことです。

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

var index = $(this).index();
$(this).closest(".aside").next().find("li")
    .eq(index).add(this).toggleClass("active");
于 2013-09-05T14:52:27.580 に答える
0

疑問が解決する場合は、このコードペンを確認してください http://codepen.io/anon/pen/CxnAw

于 2013-09-05T14:55:48.863 に答える