klicken Sie dann unclick jquery button funktioniert nicht

Question

Ich versuche, eine Schaltfläche zu machen, die auf einen Klick ändert es seine Farbe, und auf einen anderen Klick kehrt es in seine ursprüngliche Form zurück. etwas wie angeklickt und nicht geklickt.

Ich habe eine JSfiddle hinzugefügt, damit Sie sie betrachten können. https://jsfiddle.net/dw5y5xLx/3/

$('.genM').click(function() { 

$('.genM').removeClass('selected'); 


$(this).addClass('selected'); 

}); 

Dank!

auch, gibt es eine Möglichkeit, dies zu tun, indem Sie nur CSS HTML verwenden?

Danke.

Answer 1

jQuery hasClass Funktion kann

$('.genM').click(function() { 

    if($(this).hasClass('selected')){ 
      $(this).removeClass('selected'); 
    }else{ 
     $(this).addClass('selected'); 
    } 

}); 

Answer 2

$('.genM').click(function() { 
    $(this).toggleClass('selected'); 
}); 

Ich aktualisiert die js Geige für Sie, bitte überprüfen (https://jsfiddle.net/dw5y5xLx/15/) hilfreich sein!

Answer 3

IDEA:

Gibt es eine Möglichkeit, das zu tun, indem nur CSS mit HTML?

Ja, es gibt einen Weg, wie Sie das nur durch reines CSS und HTML erreichen können. Wenn Sie jedoch js nicht verwenden möchten, müssen Sie ein HTML-Element haben, das den Zustand "gedrückt" oder "nicht komprimiert" für sich behalten kann, ohne js.

Allerdings ist es nicht so ein HTML-Element, so dass Sie etwas verwenden simmilar: Checkbox

<input type="checkbox"> haben „geprüft“ und „ungeprüft“ Zustand, und es ist practicaly das gleiche wie „gedrückt“ oder "ungepresst".

---

LÖSUNG:

Der Trick ist, die ckeckbox mit CSS stilisieren, so dass es visuell als gedrückt oder unpressed Taste erscheint. Here is an example wie das Kontrollkästchen kann stilisiert werden - Sie müssen das CSS ändern, um es wie eine Schaltfläche, nicht ein Kippschalter erscheinen!

Sie wollen wie diese CSS-Selektoren verwenden (wie im Beispiel):

input[type="checkbox"]:checked { ... }, 
input[type="checkbox"]:checked + .slider { ... },