javascript - 複数の機能を 1 つに

Question

私はこれらの機能を取り、それらを1つに結合しようとしています:

$(".a h3").click(function() {
   $(".a .collapse-this").slideToggle("slow");
});

$(".b h3").click(function() {
   $(".b .collapse-this").slideToggle("slow");
});

$(".c h3").click(function() {
   $(".c .collapse-this").slideToggle("slow");
});

このようなものですが、これによりすべてが崩壊し、一度に1つずつ開く必要があります。

$(".repeatingClass h3").click(function() {
      $(".collapse-this").slideToggle("slow");
});

私は解決策を探して使用して$(this)いましたが、少し行き詰まっています。うまくいけば、誰かが助けてくれるでしょう。

score 4 · Accepted Answer

マークアップを知らずに判断するのは難しいですが.a、.bなどの要素に共通のクラスを与える必要があります。次に、次を使用できます。

$(".repeatingClass h3").click(function() {
     $(".collapse-this", $(this).closest('.repeatingClass')).slideToggle("slow");
});

.closest().repeatingClassセレクター ( ) に一致する最初の親を検索し、それをルックアップのコンテキストとして使用しています。.collapse-thisこれは、指定されたコンテキストでのみ検索することを意味し、と同等$(this).closest('.repeatingClass').find('.collapse-this')です。

私が嘘をついていないことを確認するための jsFiddle Demo ;)

score 1 · Accepted Answer

私はそれにクラックを取ります：

$(".repeatingClass h3").click(function(e){
    $(this).closest(".repeatingClass").find('.collapse-this').slideToggle("slow");
});

このclosest呼び出しは、セレクターを満たす要素の最も近い親を見つけます。この場合は .repeatingClass です。

score 1 · Accepted Answer

$(".a, .b, .c")
.addClass('repeatingClass')
.find('h3')
.click(function() {
   $(this).parents('.repeatingClass').find('.collapse-this').slideToggle("slow");
});

score 0 · Accepted Answer

ページ上の他の HTML への参照を格納するために data- 属性を使用するのが好きです。したがって、HTMLを次のように設定します。

<h3 data-panel-id="panel1">blah blah</h3>
<h3 data-panel-id="panel2">blah blah</h3>
<h3 data-panel-id="panel3">blah blah</h3>

次に、これを jQuery として記述できます。

$('h3').click(function(){
    var panelID = $(this).data('panelId');
    $('#'+panelID).slideToggle("slow");
})

score -1 · Accepted Answer

最も簡単な方法は、複数のセレクターを使用することです http://api.jquery.com/multiple-selector/

score -2 · Accepted Answer

jQueryで親要素を取得できるようにhtmlが設定されている場合。

$(".SharedClassName").click(function(){
    $(this).parent(".collapse-this").slideToggle("slow");
}

javascript - 複数の機能を 1 つに

6 に答える 6

Related

Reference