Javascript jQuery toggleClass只切换一次_Javascript_Jquery

Javascript jQuery toggleClass只切换一次

javascript jquery

Javascript jQuery toggleClass只切换一次,javascript,jquery,Javascript,Jquery,我有一个div，我正在尝试将它的类从一个切换到另一个。我只能切换一次，但它不会返回到原始类。我四处寻找可能的答案，并查看了传播函数，但我不确定这是正确的用法 <body> <div id="wrapBreather"> <div id="counter" class="cInact">

我有一个div，我正在尝试将它的类从一个切换到另一个。我只能切换一次，但它不会返回到原始类。我四处寻找可能的答案，并查看了传播函数，但我不确定这是正确的用法

<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>




开始
$（startStopCount）。单击（函数（e）{
e、 停止传播（）；
$（'.cInact'）.toggleClass（'cDown cInact'）；
});
$（'html'）。单击（函数（）{
$（“#计数器”）.removeClass（'cDown'）；
});

选择器$（startStopCount）错误。它应该是

$（“#startStopCount”）

您通过

$（'.cInact'）

获取元素。但是，当您切换类

.cInact

时，您不能再通过

$（'.cInact'）

获得该元素（它不再具有该类）

您可以使用

$（“#counter”）

进行选择（获取ID而不是类，因为您没有切换ID），或者将元素引用分配给变量：

var myAwesomeCounter = $('.cInact');

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

好的，您选择类“cInact”，然后切换它的类。 i、 e-删除它

您尝试使用相同的选择器再次选择元素：

classname==cInact

对于该元素，它不再为真。所以你什么都不选，什么都不会发生

要解决此问题，请尝试使用不同的选择器-例如-id，如下所示-

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

$（'startStopCount'）。单击（函数（e）{
e、 停止传播（）；
$（'.cInact'）.toggleClass（'cDown'）；
});
$（'html'）。单击（函数（）{
$（“#计数器”）.removeClass（'cDown'）；
});



开始

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

$（'startStopCount'）打字错误。
  $('#startStopCount').click(function(e){
      e.stopPropagation();
      $('#counter').toggleClass('cDown cInact');
  });
  $('body').click(function () {
      $('#counter').removeClass('cDown');
  });