jQuery toggleClassは1回だけトグルします

私はdivを持っています。私は一度だけそれを切り替えることができますが、それは元のクラスに戻りません。私は可能な答えを見回し、伝播関数を調べましたが、これは正しい使用法であることがわかりません。jQuery toggleClassは1回だけトグルします

<body> 
    <div id="wrapBreather"> 
     <div id="counter" class="cInact"> 
     <!--<canvas id="timerAnimation"></canvas>--> 
     </div> 
    </div> 
    <br /> 
    <button id="startStopCount" class="HomeButton" >Start</button> 
    <script> 
     $(startStopCount).click(function(e){ 
      e.stopPropagation(); 
      $('.cInact').toggleClass('cDown cInact'); 
     }); 
     $('html').click(function() { 
      $('#counter').removeClass('cDown'); 
     }); 
    </script> 
</body>

出典

2017-02-23 oldbie

' $（ '＃startStopCount'） 'typo。 –

セレクタ$（startStopCount）が間違っています。それがあります$("#startStopCount")

出典

2017-02-23 16:34:54

あなたは$('.cInact')経由で要素を取得しています。しかし、クラス.cInactを切り替えると、その要素を$('.cInact')で取得することはできなくなります（これ以上のクラスはありません）。

あなたが $('#counter')で選択を行う（あなたがIDをトグルしていないので、IDの代わりにクラスを取得）または変数への要素の参照を割り当てることができますいずれか

：

var myAwesomeCounter = $('.cInact'); 

// Then use 
myAwesomeCounter.toggleClass('cDown cInact');

出典

2017-02-23 16:37:02

まあ、あなたを」クラス 'cInact'を選択してクラスを切り替えます。を削除します。

ウェンあなたは同じセレクタで再び要素を選択しようとしています：classname == cInactそれはもはやその要素に当てはまりません。あなたは何も選択せず、何も起こりません。

すると、この問題を解決するには、より良いおそらくSO-

$('#counter').toggleClass('cDown cInact');

出典

2017-02-23 16:37:10 Shtut

$('#startStopCount').click(function(e){ 
 
     e.stopPropagation(); 
 
     
 
    $('.cInact').toggleClass('cDown'); 
 
     }); 
 

 
$('html').click(function() { 
 
$('#counter').removeClass('cDown'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <div id="wrapBreather"> 
 
    <div id="counter" class="cInact"> 
 
    <!--<canvas id="timerAnimation"></canvas>--> 
 
    </div> 
 

 
     </div> 
 
     <br /> 
 
     <button id="startStopCount" class="HomeButton" >Start</button> 
 

 
     
 
    </body>

出典

2017-02-23 16:38:28 bens

$('#startStopCount').click(function(e){ 
     e.stopPropagation(); 
     $('#counter').toggleClass('cDown cInact'); 
    }); 
    $('html').click(function() { 
     $('#counter').removeClass('cDown'); 
    });

のように、異なるselector- EG-IDを使用してみてください：

$('#startStopCount').click(function(e){ 
     e.stopPropagation(); 
     $('#counter').toggleClass('cDown cInact'); 
    }); 
    $('body').click(function() { 
     $('#counter').removeClass('cDown'); 
    });

出典

2017-02-23 16:47:27

jQuery toggleClassは1回だけトグルします

答えて

関連する問題