wie verwenden .toggleClass() in diesem Code

Hallo Jungs, ich habe diesen Codewie verwenden .toggleClass() in diesem Code

panelPlusK.append('<div id="foo">click To change the style</div><br>'); 

$('#foo').click(function() { 
    $('.agario-panel').css({ 
     'background-color': 'rgba(32, 68, 102, 0.72)', 
     'color': '#E91E63', 
     'border-color': '#2196F3', 
    }); 
    $('.agario-panel input, .agario-panel select').css({ 
     'background-color': 'rgba(44, 125, 116, 0.55)', 
     'color': '#23ff8d', 
    }); 
});

ich will es machen, wenn ich darauf klicke dann ändert er den Stil, aber wenn ich auf sie klicken Sie nochmals wieder entfernen Sie sie dann der Stil ..i sah toggleClass fuction aber ich weiß nicht, wie es implemt es

Quelle

2016-06-25 Harry zingh

einfach Stile zu einem gewissen Klasse bewegen und es wechseln:

$('#foo').click(function() { 
    $('.agario-panel').toggleClass('highlighted'); 
});

Wo in CSS Sie so etwas wie haben würde:

/* default styles of the panel */ 
.agario-panel { 
    background-color: rgba(44, 125, 116, 0.55); 
    color: #23ff8d; 
} 
/* highlighted styles overwrite default */ 
agario-panel.highlighted { 
    background-color: rgba(32, 68, 102, 0.72); 
    color: #E91E63; 
    border-color: #2196F3; 
}

Als allgemeinen Hinweis, vermeiden Sie css Methode für Styling-Elemente. In den meisten Fällen sollten Sie besser addClass, removeClass und toggleClass verwenden - so erhalten Sie eine große Flexibilität, wenn Ihr JS-Code unabhängig von CSS-Stilen ist. Trennung von Anliegen => bessere Code-Qualität, bessere Wartung.

Quelle

2016-06-25 18:45:58 dfsq

@PeterRader habe ich eine Notiz auf die Antwort. – dfsq

danke sehr für die antwort :) aber wenn ich den stil von zwei elementen ändern möchte? Ich habe den Beitrag bearbeitet ..i putted das gleiche Element ..now ich korrigiere es .. weil '$ ('# foo'). click (function() { $ ('. agario-panel'). toggleClass ('hervorgehoben'); }); 'thi werde den Stil nur von agario-panel ändern –

Nichts ändert sich auch in diesem Fall. Es wird nur '$ ('. Agario-panel, .agario-panel-eingabe, .agario-panel select'). ToggleClass ('hervorgehoben');'. Nur in CSS müssen Sie die richtigen Styles für '.agario-panel.highlighted {}' und '.agario-panel input.highlighted, .agario-panel select.highlighted {...}' definieren. – dfsq

.style {  
    background-color: rgba(32, 68, 102, 0.72); 
    color: #E91E63; 
    border-color: #2196F3; 
    background-color: rgba(44, 125, 116, 0.55); 
    color: #23ff8d; 
} 

$('#foo').click(function() { 
    $('element').toggleClass('style'); 
}

Dies fügt dem Element den CSS-Stil hinzu, wenn Sie auf foo klicken. Wenn Sie erneut darauf klicken, wird die Stilklasse entfernt.

Ich weiß, dass die Klasse das falsche Styling haben kann, aber hoffentlich bekommen Sie die Idee!

Quelle

2016-06-25 18:48:34 jacoballenwood

können Sie verwenden .addClass() und .removeClass()

$("#foo").click(function() { 
 
$("#foo").addClass("agrario-panel"); 
 
}); 
 

 
$("#remove").click(function() { 
 
$("#foo").removeClass("agrario-panel"); 
 
});

.agrario-panel { 
 
     background-color: rgba(32, 68, 102, 0.72); 
 
     color: #E91E63; 
 
     border-color:#2196F3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo">Click to change </div> 
 
<div id="remove">Click to Remove</div>

Quelle

2016-06-25 18:50:07

wie verwenden .toggleClass() in diesem Code

Antwort

Verwandte Themen