javascript - 如何在此代码中使用 .toggleClass()

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

我想在单击它时创建它然后它会更改样式但是当我再次单击它时它会删除样式..我看到了 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 样式时，您将获得极大的灵 active 。关注点分离 => 更好的代码质量，更好的维护。