Question

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

Answer 1

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

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

var myAwesomeCounter = $('.cInact');

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

Answer 2

嗯，您正在选择课程＆＃39; cInact＆＃39;然后切换它的课程。即删除它。

你好，你试图用同一个选择器再次选择元素：classname == cInact它不再适用于那个元素。所以什么都不做，没有任何反应。

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

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

Answer 3

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

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

jQuery toggleClass只切换一次

5 个答案: