2

li要素がクリックされたときに説明的な情報がフェードインする関数を作成しました。この関数は、リスト内の新しい情報をフェードします。機能していない行は であり$(".hover").not(".hover", this).fadeOut(200).removeClass("not-me");、 まで下がっていることを理解して.not(".hover", this)ください。

試してみ.not(this)ましたが、これは正しく機能していません。おそらく、そのthis部分がまだli要素から選択されているため、元々はクリック機能から$("ul li").click(function() {です。

.not(".hover", this)うまく使う方法はありますか？

jQuery:

$("ul li").click(function() {

  // Remove other divs with element currently shown
  $(".hover").not(".hover", this).fadeOut(200).removeClass("not-me");

  // Stop chosen element from fading out
  $(".hover", this).addClass("not-me").fadeIn(200);

});

HTML:

<li>
  <div class="hover">
     <h3>Header</h3>
     <p>Shot but breif description, cut me off if you need to.</p>
   </div>
   <img src="/images/1.jpg" alt="" />
</li>
<li>
  <div class="hover">
     <h3>Header</h3>
     <p>Shot but breif description, cut me off if you need to.</p>
   </div>
   <img src="/images/2.jpg" alt="" />
</li>
<li>
  <div class="hover">
     <h3>Header</h3>
     <p>Shot but breif description, cut me off if you need to.</p>
   </div>
   <img src="/images/3.jpg" alt="" />
</li>
4

3 に答える 3

3

私はあなたがこれを探していると思います：

$("li").not(this).find(".hover");

の子を除くすべての.hover要素が得られますthis。

おそらくその$('li')オブジェクトをキャッシュする必要があります...

于 2013-02-01T05:05:11.923 に答える
1

.not1 つの引数のみを取ります。また、満足できるものはありません$(".hover").not(".hover")。使うだけ$(".hover").not(this)

http://api.jquery.com/not/

于 2013-02-01T05:05:41.543 に答える
1

を使用すると、これは非常に簡単です.siblings()。<li>また、現在の外部<ul>を考慮しないという意味でも固定されています。

$('ul li')そうは言っても、後でページにリストを追加する場合、意図しない限り、最初のセレクターは適切ではない可能性があります。

$("ul li").click(function() {

  // Remove other divs with element currently shown
  $(this)
      .siblings() // get sibling li's
          .find('.hover') // and fadeout their inner .hover divs
              .fadeOut(200)
              .removeClass("not-me")
              .end()
          .end()
      .find('.hover')
          .fadeIn(200)
          .addClass("not-me")
});
于 2013-02-01T05:13:01.120 に答える