Question

我有一个带按钮的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动作

Answer 1

$("#buttonWrapper button").each(function(){
    $(this).addClass("active");
});

#buttonWrapper button选择器选择ID为buttonWrapper的元素的所有子按钮，而each方法迭代它们。 DEMO

Answer 2

使用按钮上的.each()。然后你可以做一个简单的检查，如果选项是1或0.我认为你的情况并不是真的需要，但我喜欢它，确保0没有活动类

$("#buttonWrapper button").each(function () {         
    if (options[$(this).attr('id')] == '1')
        $(this).addClass('active');
    else
        $(this).removeClass('active');
});

Answer 3

您应该使用addClass：

$(this).addClass('active');

而不是

$(this).className += " active";

Answer 4

.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>

使用JS或JQUERY在条件上更改所有按钮类

4 个答案: