1

現在、クリックすると別の DIV が表示される DIV があります。正常に動作します。ただし、同じ id をページの少し下に追加してもう一度効果を上げようとすると、何も得られません。これが私のスクリプトです：

<script>
$(document).ready(function(){
  $("#click").click(function(){
    $("#fade").fadeToggle();
  });
});
  </script>

そして、私が持っているHTMLで：

<div id="click">Click Here!
<div id="fade">CONTENT HERE
</div>
</div>

私が言ったのは、もう一度やろうとするまではうまくいくということです。異なるIDでスクリプトを書き直さずに、何度でもこれを実行できるようにする方法はありますか(それよりも効率的な方法が必要です)

4

3 に答える 3

1

ID を繰り返す代わりにクラスを使用し、クラス セレクターを使用してイベントをバインドし、fadeセレクターのコンテキストを使用して、クリックされた要素内のクラスを持つ要素を見つけます。

<div class="click">Click Here!
<div class="fade">CONTENT HERE
</div>
</div>


</<script>
$(document).ready(function(){
  $(".click").click(function(){
    $(".fade", this).fadeToggle();
  });
});
</script>div>
于 2013-08-19T12:58:24.360 に答える
1

ID はドキュメント内で一意である必要があります。ドキュメントから：

id = name [CS] この属性は、要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。

class = cdata-list [CS] この属性は、クラス名またはクラス名のセットを要素に割り当てます。任意の数の要素に同じクラス名を割り当てることができます。複数のクラス名は空白文字で区切る必要があります。

#click解決策は、 id を.clickクラスに置き換えることです。

HTML:

<div class="click">Click Here!
    <div class="fade">CONTENT HERE</div>
</div>

jQuery:

$(document).ready(function(){
  $(".click").click(function(){
    $(".fade", this).fadeToggle();
  });
});

また、クリックした要素 ( ) 内を選択しているため#fade、id を class に置き換える必要があります。.fade.fadethis

JSFIDDLE

于 2013-08-19T12:58:47.657 に答える
0

id="YOUR_ID_NAME"は、ドキュメント内の一意の ID です。

jqueryを再利用したい場合は、クラスを使用できます

それ以外の場合は、jquery で複数の ID を取得できます

コードは次のとおりです。

$(document).ready(function(){
  $("#click,#click1,#click2").click(function(){
    $(".fade", this).fadeToggle();
  });
});




<div class="click">Click Here!
    <div id="fade">CONTENT HERE</div>
</div>

<div id="click1">Click Here!
    <div class="fade">CONTENT HERE</div>
</div>

<div id="click2">Click Here!
    <div class="fade">CONTENT HERE</div>
</div>

ドキュメントのクラスをより適切に使用するため。jqueryで再利用したい場合。

$(document).ready(function(){
  $(".click").click(function(){
    $(".fade", this).fadeToggle();
  });
});


<div class="click">Click Here!
<div id="fade">CONTENT HERE
</div>
</div>
于 2013-08-19T13:12:03.743 に答える