我有一个带按钮的div:
<div id="buttonWrapper">
<button id="x"> X </button>
<button id="y"> Y </button>
<button id="z"> Z </button>
</div>
当你进入页面时,有一个JQuery函数将userPreferences加载到一个名为options的表中。它是一个简单的表,其中上面的按钮id有一个值。
options = {x: "1", y: "1", z: "0"}
我希望在条件上更改元素类:当在选项值中时,1按钮获得类&#39;活动&#39;。我有这样的事情:
$("#buttonWrapper").find("button", function () {
if (options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1"){
$(this).className += " active";
};
return false;
})
并且它不起作用。没有错误,只是根本不起作用。我做错了什么?
在同一页面上,我有这个功能的第二部分,它附加了对点击按钮的操作:
.click(function () {
modalPreferencesSave($(this).attr("id"), $(this).hasClass("active") ? "0" : "1");
return false;
});
和第二部分像魅力一样 - 动作被分配,并且工作得很好。只添加样式不会起作用:/
所以整个函数看起来像这样:
$("#buttonWrapper").find("button", function () {
if (options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1"){
$(this).className += " active";
};
return false;
}).click(function () {
modalPreferencesSave($(this).attr("id"), $(this).hasClass("active") ? "0" : "1");
return false;
});
第一部分 - 不工作 - 不改变风格,第二部分成功添加onClick动作
答案 0 :(得分:3)
$("#buttonWrapper button").each(function(){
$(this).addClass("active");
});
#buttonWrapper button
选择器选择ID为buttonWrapper
的元素的所有子按钮,而each
方法迭代它们。
DEMO
答案 1 :(得分:2)
使用按钮上的.each()
。然后你可以做一个简单的检查,如果选项是1或0.我认为你的情况并不是真的需要,但我喜欢它,确保0没有活动类
$("#buttonWrapper button").each(function () {
if (options[$(this).attr('id')] == '1')
$(this).addClass('active');
else
$(this).removeClass('active');
});
答案 2 :(得分:1)
您应该使用addClass
:
$(this).addClass('active');
而不是
$(this).className += " active";
答案 3 :(得分:1)
.find()
没有回调,因此无效。我建议您使用$.fn.filter()
然后使用$.fn.addClass()
$(document).ready(function() {
var options = {
x: "1",
y: "1",
z: "0"
};
$("#buttonWrapper button").filter(function() {
return options[$(this).attr("id")] != null && options[$(this).attr("id")] == "1";
}).addClass("active");
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttonWrapper">
<button id="x">X</button>
<button id="y">Y</button>
<button id="z">Z</button>
</div>