0

jQueryのヘルプをいただければ幸いです。ここでは、すべて正常に動作します: jsfiddle- これは正常に動作します

しかし、ここでは、同じページに 2 つの同一の HTML ブロックがあると、それらが衝突します (2 番目のブロックで「表示」をクリックすると、互いに干渉し、1 番目のブロックに影響します): jsfiddle - 問題

JS を変更する方法はありますか (.closest()、.find()、その他のトラバース手法を正しく使用する)、これらのブロックを必要なだけ同じページに配置し、すべて独立して動作させることができますか? (新しい ID を発明したり、JS コードを増やしたりする必要はありません)。

は簡単にトラバースできますが<li>、DIV では可能ですか?

EDIT：（ 私は何の評判も持っていないので、編集を使用してください：IDの助けと余分なブラッシュアップに感謝します。すべてが完全に機能します。

ではごきげんよう）

4

1 に答える 1

3

ID の重複があり (それらを classnames に変えます.funFactAnswer)、セレクターはジェネリックであり、ターゲットに固有のものにします。

 $(document).ready(function () {
      $(".showfunFactAnswer").click(function () {
         var $this = $(this);
         $this.closest('.funFactWrap').find('.funFactAnswer').slideDown()
         $this.next().removeClass("hide");
     });
     $(".hideButtonAnswer").click(function () {
         $(this).addClass("hide").closest('.funFactWrap').find('.funFactAnswer').slideUp()
     });

 });

フィドル

id が重複している場合、id セレクターは同じ id を持つ要素の最初のインスタンスのみを選択します。

于 2013-10-19T17:42:31.653 に答える