jQuery toggleclass仅切换一次

我有一个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>

您正在通过$('.cInact')获取元素。但是，当您切换类.cInact时，您无法再通过$('.cInact')获得该元素（它不再具有该类）。

您可以使用$('#counter')进行选择（获取ID而不是类，因为您没有切换ID），也可以将元素引用分配给变量：

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

好吧，您正在选择" cinact"类，然后切换其类。即将其删除。

wen您正在尝试使用相同的选择器再次选择元素： classname == cInact对于该元素而言不再是正确的。所以您什么也没选择，什么也没发生。

要解决此问题，请尝试使用其他选择器 - 例如 -

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

选择器$（StartStopCount）是错误的。它应该是$("#startStopCount")

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

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

相关内容

最新更新

热门标签：