jQuery toggleClass只能切換一次

我有一個div，我試圖將其類從一個切換到另一個。我只能切換一次，但不會返回原始類。我四處尋找可能的答案並查看了傳播函數，但我不確定這是否正確使用？jQuery toggleClass只能切換一次

<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'）'錯字。 –

選擇器$（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它不再適用於該元素。所以你什麼也不選，什麼都不會發生。

要解決這個問題，嘗試使用不同的selector- EG-ID，像所謂

$('#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'); 
    });

或許更好：

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

來源

2017-02-23 16:47:27

jQuery toggleClass只能切換一次

回答

相關問題