0

適用したクラスのテキストのドロップダウン段落を表示するホバー関数（以下のコードを参照）があります。これは、指定されたクラスで正常に機能しています。

$('.job_container').hover(function(){
   $(".job_subheading").animate({top: "30px }, 200);},
      function(){
            $(".job_subheading").animate({
        top: "0px" }, 200);
      });

ただし、ドロップダウン段落が異なるこれらのクラスのインスタンスをさらに追加したいと思います。私が行ってから1つにカーソルを合わせると、クラスが同じであるため、すべてにドロップダウンが適用されます。

クラスをIDに変更し、使用するすべてのインスタンスのコードを書き直す必要がありますか？複数のインスタンスにコードを適用するための最も簡単な方法は何ですか？

助けてくれてありがとう、ギャビン

4

1 に答える 1

0

子セレクターを使用する必要があります。

$('.job_container').hover(function(){
$(this).children(".job_subheading").animate({
top: "30px }, 200);},
                      function(){
$(this).children(".job_subheading").animate({
top: "0px" }, 200);

したがって、html は次のようにする必要があります。

<div class="job_container"><div class="job_subheading"></div>something else</div>
<div class="job_container"><div class="job_subheading"></div>something else</div>
<div class="job_container"><div class="job_subheading"></div>something else</div>
于 2013-02-21T09:47:31.283 に答える