jQuery toggleClass schaltet nur einmal um

Ich habe ein Div, das ich versuche, seine Klasse von einem zum anderen zu wechseln. Ich kann es nur einmal umschalten, aber es wird nicht zur ursprünglichen Klasse zurückkehren. Ich suchte nach möglichen Antworten und schaute in die Propagationsfunktion, aber ich bin mir nicht sicher, ob das die richtige Verwendung ist.jQuery toggleClass schaltet nur einmal um

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

Quelle

2017-02-23 oldbie

' $ ('# startStopCount') 'Tippfehler. –

Der Selektor $ (startStopCount) ist falsch. Es sollte $("#startStopCount") sein

Quelle

2017-02-23 16:34:54

Sie erhalten das Element über $('.cInact'). Wenn Sie jedoch die Klasse .cInact umschalten, können Sie dieses Element nicht mehr durch $('.cInact') abrufen (es hat diese Klasse nicht mehr).

Sie können entweder mit $('#counter') (immer die ID statt der Klasse, weil Sie nicht die ID Makeln) eine Auswahl tun oder das Element Verweis auf eine Variable zuweisen:

var myAwesomeCounter = $('.cInact'); 

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

Quelle

2017-02-23 16:37:02

Nun, Sie‘ Wählen Sie die Klasse "cInact" und schalten Sie dann ihre Klasse um. d. H. Entfernen.

Wen Sie versuchen, das Element erneut mit dem gleichen Selektor auswählen: classname == cInact es ist nicht mehr wahr für dieses Element. also wählst du nichts und nichts passiert.

Um dies zu beheben, versuchen Sie einen anderen Wähl- EG- ID verwenden, wie sogenannten

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

Quelle

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>

Quelle

2017-02-23 16:38:28 bens

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

besser vielleicht:

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

Quelle

2017-02-23 16:47:27

jQuery toggleClass schaltet nur einmal um

Antwort

Verwandte Themen