【jQuery】要素をクリックするたびに特定のclassが存在するか判別したい

【やりたいこと】
特定の要素をクリックするたびにクラスを追加・削除を切り替えた上で、そのクラスが存在しているかを判別したい

【行ったこと】
以下の挙動を想定して、下記のコードを書きました。

トリガーとなる個別複数の要素をクリックするたびに「active」というクラスをそれぞれ追加・削除を交互に行い、合わせて「active」のクラスが１つでもページ内に存在するかどうかを判別して、ターゲットとなる要素をCSSで表示非表示を制御する

//HTML（抜粋）
<span id="trigger−01">トリガー1</span>
<span id="trigger−02">トリガー2</span>
<div id="target">ターゲット</div>

//js
$("#trigger−01").on('click',function(){
 $(this).toggleClass('active');
 if($('.active').length){
  //「active」クラスがある時
  $('#target').css('display','block'); 
 } else {
 //「active」クラスがない時
  $('#target').css('display','none'); 
 }
});
$("#trigger−02").on('click',function(){
 $(this).toggleClass('active');
 if($('.active').length){
  $('#target').css('display','block'); 
 } else {
  $('#target').css('display','none'); 
 }
});

【結果】
最初にどちらかの要素をクリックした時は「active」クラスの判別でターゲットの要素が表示されるのですが、以降クリックした時に「active」がないのにも関わらずターゲットの要素が表示されたままになってしまう。

HTML上では「active」クラスの追加・削除は問題なく行われており、条件分岐のところをデバッグをすると必ず「active」クラスが存在するときの挙動になる。

====

以上、詳しい方ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

kei344

2017/08/18 18:00

https://jsfiddle.net/vwud4o75/ 再現しません。

s_ogawa

2017/08/19 03:07

早速ご返答いただきありがとうございました、問題については自己解決いたしました。お手数をおかけいたしました。

行動規範の内容に同意します

回答2件

以下のコードで検証し、トリガー2、トリガー1、トリガー2、トリガー1という順序でクリックし動作を確認しましたが、質問者さんがいうような「「active」がないのにも関わらずターゲットの要素が表示されたままになってしまう」という動作は確認できませんでした。一度、キャッシュの消去を行ってから以下のコードで挙動を確認してみていただけませんか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<span id="trigger−01">トリガー1</span>
9<span id="trigger−02">トリガー2</span>
10<div id="target">ターゲット</div>
11<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
12<script>
13    $(function () {// 読み込み時のチェックを追加
14        if ($(".active").length) {
15            $("#target").css("display", "block");
16        } else {
17            $("#target").css("display", "none");
18        }
19    });
20
21    $("#trigger−01").on("click", function () {
22        $(this).toggleClass("active");
23        if ($(".active").length) {
24            $("#target").css("display", "block");
25        } else {
26            $("#target").css("display", "none");
27        }
28    });
29
30    $("#trigger−02").on("click", function () {
31        $(this).toggleClass("active");
32        if ($(".active").length) {
33            $("#target").css("display", "block");
34        } else {
35            $("#target").css("display", "none");
36        }
37    });
38</script>
39</body>
40</html>