Question

大家好我有这个代码

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',
    });
});

我想在我点击它然后它改变风格但是当我再次点击它然后它删除样式..i看到toggleClass功能但我不知道如何在那里实现

Answer 1

只需将样式移动到某个类并切换它：

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

在CSS中你会有类似的东西：

/* 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;
}

作为一般建议，请避免使用css样式元素的方法。在大多数情况下，您最好使用addClass，removeClass和toggleClass - 这样，当您的JS代码独立于CSS样式时，您将获得极大的灵活性。关注点分离=＆gt;更好的代码质量，更好的维护。

Answer 2

.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');
}

当您单击foo时，这将向元素添加css样式。再次单击它时，它将删除样式类。

我意识到课程可能有错误的造型，但希望你能得到这个想法！

Answer 3

您可以使用.addClass（）和.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>

如何在此代码中使用.toggleClass（）

3 个答案: