Einfachste Möglichkeit, 2 Klassen in jQuery umzuschalten

Lesezeit: 4 Minuten

Einfachste Moglichkeit 2 Klassen in jQuery umzuschalten
Stewie Griffin

Wenn ich Klasse .A und Klasse .B habe und auf Knopfdruck zwischen ihnen wechseln möchte, was ist eine nette Lösung dafür in jQuery? Ich verstehe immer noch nicht wie toggleClass() funktioniert.

Gibt es eine Inline-Lösung, um es einzufügen onclick="" Veranstaltung?

  • Inline-JS (onclick="") ist schlecht. Warum verwenden Sie nicht jQuery, um einen geeigneten Event-Handler zu registrieren (oder ein Delegate/Live-Ereignis, wenn Sie viele Elemente mit demselben Handler haben)

    – Meister der Diebe

    9. August 11 um 19:51 Uhr

Einfachste Moglichkeit 2 Klassen in jQuery umzuschalten
Frédéric Hamidi

Wenn Ihr Element class verfügbar macht A von anfang an kannst du schreiben:

$(element).toggleClass("A B");

Dadurch wird die Klasse entfernt A und Klasse hinzufügen B. Wenn Sie das noch einmal tun, wird die Klasse entfernt B und Klasse wieder aufnehmen A.

Wenn Sie die Elemente abgleichen möchten, die eine der beiden Klassen verfügbar machen, können Sie a verwenden mehrere Klassenauswahl und schreibe:

$(".A, .B").toggleClass("A B");

  • Was ist, wenn ich anstelle von Element je nach Zustand Klasse A oder B setzen möchte?

    – Stewie Griffin

    9. August 11 um 19:50 Uhr

  • Beachten Sie, dass Sie das Objekt, das Sie umschalten möchten, zwischenspeichern sollten, anstatt die Elemente jedes Mal auszuwählen, da die häufigste Verwendung für das Umschalten von Klassen in einem Klick-Handler ist. var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});

    – Mumienbot

    27. März 15 um 8:53 Uhr


  • @mummybot – als herablassend gekennzeichnet. Frédéric – was ist, wenn das Element “von Anfang an” keine Klasse hat? das ist auch ein wichtiger Zustand.

    – vsync

    21. September 15 um 22:33 Uhr

  • Dies funktioniert nicht mehr. Jetzt werden beide Klassen gleichzeitig hinzugefügt und entfernt.

    – Fabian

    3. Mai 18 um 1:35 Uhr

  • @FrédéricHamidi Ich weiß nicht, was ich falsch gemacht habe, aber es hat nicht funktioniert, als ich es versuchte. Jetzt scheint es in Ordnung zu sein. In meinem Fall wurden beide Klassen gleichzeitig hinzugefügt und entfernt, aber es scheint jetzt zu funktionieren. Wahrscheinlich habe ich etwas anderes vermasselt und es hat diese Funktion beeinflusst. Ich habe meinen Kommentar gelöscht. Sorry für die Verwirrung.

    – BurakUeda

    12. Dezember 19 um 6:05 Uhr

1644071536 950 Einfachste Moglichkeit 2 Klassen in jQuery umzuschalten
Rion Williams

Hier ist eine vereinfachte Version: (wenn auch nicht elegant, aber einfach zu folgen)

$("#yourButton").toggle(function() 
{
        $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'

}, function() {
        $('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'

});

Alternativ eine ähnliche Lösung:

$('#yourbutton').click(function()
{
     $('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});

  • Ich glaube an diese Art der Verwendung toggle ist in jquery 2.0 veraltet

    – Vittor

    9. Mai 16 um 14:35 Uhr

  • Danke vittore. Es ist offensichtlich eine ältere Antwort aus dem Jahr 2011. Ich habe die Syntax entsprechend aktualisiert.

    – Rion Williams

    9. Mai 16 um 14:36 ​​Uhr

1644071536 546 Einfachste Moglichkeit 2 Klassen in jQuery umzuschalten
vsync

Ich habe ein jQuery-Plugin für die Arbeit mit DRY erstellt:

$.fn.toggle2classes = function(class1, class2){
  if( !class1 || !class2 )
    return this;

  return this.each(function(){
    var $elm = $(this);

    if( $elm.hasClass(class1) || $elm.hasClass(class2) )
      $elm.toggleClass(class1 +' '+ class2);

    else
      $elm.addClass(class1);
  });
};

// usage example:
$(document.body).on('click', () => {
  $(document.body).toggle2classes('a', 'b')
})
body{ height: 100vh }
.a{ background: salmon }
.b{ background: lightgreen }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Click anywhere

Deine onClick Anfrage:

<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>

Versuch es: https://jsfiddle.net/v15q6b5y/


Nur die JS à la jQuery:

$('.selector').toggleClass('A', !state).toggleClass('B', state);

Hier ist ein weiterer “nicht-konventioneller” Weg.

  • Es impliziert die Verwendung von unterstreichen oder Lodash.
  • Es geht von einem Kontext aus, in dem Sie:
    • das Element hat keine Init-Klasse (das heißt, Sie können toggleClass(‘a b’) nicht ausführen)
    • Sie müssen die Klasse dynamisch von irgendwoher bekommen

Ein Beispiel für dieses Szenario könnten Schaltflächen sein, deren Klasse auf einem anderen Element umgeschaltet werden soll (z. B. Registerkarten in einem Container).

// 1: define the array of switching classes:
var types = ['web','email'];

// 2: get the active class:
var type = $(mybutton).prop('class');

// 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array:
$mycontainer.removeClass(_.without(types, type)[0]).addClass(type);

Einfachste Moglichkeit 2 Klassen in jQuery umzuschalten
Überwinder

Die einfachste Lösung ist toggleClass() beide Klassen einzeln.

Angenommen, Sie haben ein Symbol:

    <i id="target" class="fa fa-angle-down"></i>

Zum Umschalten zwischen fa-angle-down und fa-angle-up Mach Folgendes:

    $('.sometrigger').click(function(){
        $('#target').toggleClass('fa-angle-down');
        $('#target').toggleClass('fa-angle-up');
    });

Da hatten wir fa-angle-down am Anfang ohne fa-angle-up Jedes Mal, wenn Sie beide umschalten, verlässt das eine, damit das andere erscheint.

1644071537 652 Einfachste Moglichkeit 2 Klassen in jQuery umzuschalten
Liebe Kumar

Schalten Sie mit Jquery zwischen zwei Klassen „A“ und „B“ um.

$(‘#select_id’).toggleClass(“AB”);

.

784250cookie-checkEinfachste Möglichkeit, 2 Klassen in jQuery umzuschalten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy