別のクラスがクリックされたときにクラスを削除/追加する方法は？

Question

以下、 'plus'クラスをクリックすると、すべての非表示行が表示されます。

デフォルトでは非表示になっています。

特定の年がクリックされたときにどうすればその年の月が表示されますか。

以下のコードをクリックすると、すべて表示されます。

<cfoutput query="getdates" group="year"> 
    <thead> 
    <tr> 
     <th> <span class="plus">+</span> #year#</th> 
    </tr> 
    </thead> 
    <cfif dtToday gte combineDates> 
    <tbody class="closeAction"> 
     <cfoutput> 
     <tr> 
      <td><a href=""> #month# </a></td> 
     </tr> 
     </cfoutput> 
    </tbody> 
    </cfif> 
</cfoutput> 

<style> 
    .closeAction { 
    display: none; 
    } 
</style> 

<script> 
    $(".plus").click(function() { 
    //$('.plus',this).html('-'); 
    $(".closeAction").removeClass("closeAction"); 
    }) 
</script> 

これは、クリックする前にどのように見えるかです：

Answer 1

使用closest()とnext()後（提供クラス名で次の要素を検索し、親に行きます）。

closeActionにADITIONでcloseクラスを追加することも、なぜノートそして/終了日を開くためにtoggleClassを使用します。ここ

が働いfiddle

そしてあるスニペット

$(".plus").click(function() { 
 
    $(this).closest('thead').next('.closeAction').toggleClass('closed'); 
 
})

.closed { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr > 
 
     <th> <span class="plus">+</span> 2015</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="closeAction closed"> 
 
    <tr> 
 
     <td><a href="#"> Jan </a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#"> Feb </a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#"> Mar </a></td> 
 
    </tr> 
 
    <thead> 
 
    <tr > 
 
     <th> <span class="plus">+</span> 2016</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="closeAction closed"> 
 
    <tr> 
 
     <td><a href="#"> #month# </a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#"> Jan </a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#"> Feb </a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#"> Mar </a></td> 
 
    </tr> 
 
    <thead> 
 
    <tr > 
 
     <th> <span class="plus">+</span> 2017</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="closeAction closed"> 
 
    <tr> 
 
     <td><a href="#"> Jan </a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#"> Feb </a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#"> Mar </a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

何をやっているクラスcloseActionを持つすべての要素を考慮しています。あなたは次のものを誘発する必要があります。だから、あなたはnext()

<script> 
$(".plus").click(function() { 
//$('.plus',this).html('-'); 
    $(this).next(".closeAction").removeClass("closeAction"); 
}) 
</script> 

Answer 3

$(".closeAction")を使用することができますなぜ彼らすべてが開いているDOMに、このクラスですべての要素を見つけることです。そのクラスに関連付けられている要素を見つける必要があります。 thisを使用すると、DOMを上に移動して、そのクラスの要素をイベントのコンテキストから検索できます。 thisはクリックイベントのコンテキストで、イベントが添付された要素はプラスです。

$(this).closest('thead').next().find('.closeAction').removeClass("closeAction"); 

これは、最も近いthead要素まで移動次の要素を取得し、その内部にcloseActionクラスを持つすべての要素を検索します。あなたは、このコードは、最も可能性の高い改善される可能性がHTMLのより多くのではなく、我々は唯一それがどのように見えるかを知るために、そのハードプラスとcloseActionの単一例で作業しているので、例を示すことができた場合

。

Answer 4

.plusと.closeAction要素は、あなたが最も近いcfoutput要素までトラバースし、そこから、.closeAction要素を見つけることができるので、同じcfoutput要素を共有しているようです。

$(".plus").click(function() { 
    $(this).closest("cfoutput").find('.closeAction').removeClass("closeAction"); 
})