Wie man css klasse klasse zurück zu machen auf vor css jquery

Question

so habe ich eine <div> mit einer blauen Hintergrundfarbe, mit einem jquery onclick-Ereignis, das die Farbe dieses div zu rot ändert. Ich habe mich gefragt, wie ich die div-Hintergrundfarbe wieder blau machen könnte, wenn der Knopf wieder angeklickt wird. & kehrt zurück zu rot, wenn ich wieder klicke und so?

Answer 1

Ich bin mir nicht sicher, was tun Sie genau bedeuten von zweimal klicken, also habe ich zwei mögliche Lösungen für Sie gemacht.

Erste Box ändert seinen Hintergrund zu blue auf ein klicken und Änderungen zurück in black, wenn zweimal (Doppelklick) angeklickt.

Zweite Box ändert seinen Hintergrund mit jedem Klick, einmal ist es green und einmal ist es yellow.

var box = document.getElementById('box'), 
 
    box2 = document.getElementById('box2'), 
 
    bool = true; 
 
    
 
    box.addEventListener('click', function(){ 
 
     this.style.background = 'blue'; 
 
    }); 
 

 
    box.addEventListener('dblclick', function(){ 
 
     this.style.background = 'black'; 
 
    }); 
 

 
    box2.addEventListener('click', function(){ 
 
     if (bool) { 
 
     this.style.background = 'yellow'; 
 
     bool = false; 
 
     } else { 
 
     this.style.background = 'green'; 
 
     bool = true; 
 
     } 
 
    });

#box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: black; 
 
    margin: 5px; 
 
} 
 
#box2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: green; 
 
    margin: 5px; 
 
}

<div id='box'></div> 
 
<div id='box2'></div>

Answer 2

Ihr gonig zu teilen einige Code für eine Probe auf, wie Ihr Problem würde gelöst werden. Aber die häufigste Art und Weise wäre Ihre Jquery Onclick-Ereignis haben, überprüfen Sie die Farbe des div Code ähnlich ist:

var theColorIs = $('a').css("backgroundColor"); 

dann Farben auf Basis ändern zu müssen, was derzeit die Farbe

ist

Answer 3

Sie verwenden übergeben Sie eine leere Zeichenfolge an .css in jQuery, wie .css('background-color', '');, um vorherigen Wert zu löschen.

Answer 4

Sie benötigen diese.

$(".yourDiv").click(function() { 
    $(this).toggleClass("red"); 
}); 

Ihre CSS

.yourDiv{ background-color: #1E90FF; } 
.yourDiv.red { background-color:#FF0000; } 

Answer 5

JQuery hat eine Methode toggleClass genannt, die dafür geeignet ist. Sie sollten sich auch die Umschaltmethode ansehen.

<style> 
.blue{ 
     background-color: blue; 
} 
.red{ 
     background-color: red; 
} 
</style> 

<div class="blue"> 
     .... 
</div> 

<script> 

$(".blue, .red").click(function() { 
    $(this).toggleClass("blue"); 
    $(this).toggleClass("red"); 
}); 
</script> 

p.s. Im Schreiben auf einem Telefon

Answer 6

Keine jQuery notwendig, alles, was Sie tun müssen, ist einige Styling zu einer CSS-Klasse hinzufügen und die Klasse über Vanilla JavaScript hinzufügen/entfernen.

let body = document.querySelector('body'), 
 
    box = document.querySelectorAll('.box'); 
 

 
body.addEventListener('click', function(e) { 
 
    let cl = e.target.classList; 
 
    if (cl.contains('box')) 
 
    cl.toggle('active'); 
 
});

.box { 
 
    background: blue; 
 
    display: inline-block; 
 
    margin:  5px; 
 
    height:  2.5rem; 
 
    width:  2.5rem; 
 
} 
 

 
.active { 
 
    background: red; 
 
}

<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div>

• bindet Ereignis an das übergeordnete Element klicken (in diesem Fall der Körper). Dies ist wichtig, weil stattdessen 5 Klickfunktionen zu schaffen für den Browser zu handhaben es nur ist ein
• weil der Klick zum Körper Elemente befestigt ist, müssen wir schauen, was das Ereignisziel war der Klick (was war eigentlich clickeD), um festzustellen, ob es eine Box (oder nur ein Körper) war. Wir können feststellen, ob es eine Box war, indem wir nach der Klasse suchen.
  Wenn Sie dies mehr untersuchen möchten, entfernen Sie die if-Anweisung und führen Sie den Code erneut aus. Klicken Sie dann auf den Leerraum. Sie werden feststellen, dass wir, weil wir nicht nach Feldern gesucht haben, die aktive Klasse zu jedem Element hinzufügen, auf das geklickt wurde.

Für eine noch kürzeren Code können Sie den gesamten wenn Block mit cl.contains('box') && cl.toggle('active'); entfernen ersetzen, die sagt „wenn das Element eine Box Klasse hat, dann drücken Sie die aktiv Klasse“