Question

我想使用一个按钮为某些选定的元素打开和关闭样式。我可以添加样式，如下所示：

$(".button").click(function() {
    $(".elements").each(function() {
        var height = $(this).data("height");
        $(this).css({ 'height': height, 'background-color': "#ccc" });
    });
 });

但是，我不确定如何将样式切换为“关闭”（删除我刚应用的样式）。

我尝试使用以下解决方案（jQuery toggle CSS?），但我不确定它是否会在这种情况下起作用，因为我正在使用函数从{{中收集样式属性1}}每个元素的属性。

使用jQuery执行此操作的最佳方法是什么？

Answer 1

你使它变得不必要地复杂。只需设置默认样式，然后切换具有不同样式的类。请参阅下面的示例。

$(function () {

$("[type=button]").click(function () {

$("div").toggleClass("otherClass");

});
});

* {
margin: auto;
width: 100px
}

div {
height: 100px;
background: red;
margin-bottom: 25px;
transition: all 2s;
color: white;
line-height: 100px;
text-align: center;
font-weight: bold;
}

.otherClass {
background: green;
transition: all 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>The DIV</div>

<input type="button" value="Toggle Style" >

如何在元素上切换样式

1 个答案: