Javascript 使用JS或JQUERY更改所有按钮类的条件

我有一个带按钮的div：

<div id="buttonWrapper">
<button id="x"> X </button>
<button id="y"> Y </button>
<button id="z"> Z </button>
</div>

我想改变元素的类别，条件是：当选项中的值为1时，按钮会使类别“活动”。我得到了这样的东西：

$("#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操作

您应该使用

addClass

：

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

而不是

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

---

您应该使用

addClass

：

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

而不是

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

#buttonWrapper按钮

选择器选择id为

buttonWrapper

的元素的子元素的所有按钮，而

每个

方法对其进行迭代。

#buttonWrapper按钮

选择器选择id为

buttonWrapper

的元素的子元素的所有按钮，而

每个

方法对其进行迭代。 没有回调，因此无法工作。我建议你使用，然后

$（文档）.ready（函数（）{
变量选项={
x:“1”，
y:“1”，
z:“0”
};
$（“#按钮rapper button”）.filter（函数（）{
返回选项[$（this.attr（“id”）！=null&&options[$（this.attr（“id”）]=“1”；
}).addClass（“主动”）；
});
.active{
颜色：红色；
}

X
Y
Z
没有回调，因此无法工作。我建议你使用，然后


$（文档）.ready（函数（）{
变量选项={
x:“1”，
y:“1”，
z:“0”
};
$（“#按钮rapper button”）.filter（函数（）{
返回选项[$（this.attr（“id”）！=null&&options[$（this.attr（“id”）]=“1”；
}).addClass（“主动”）；
});
.active{
颜色：红色；
}

X
Y
Z
使用按钮上的
.each（）
。然后，您可以简单地检查选项是1还是0。我认为在您的情况下，else并不是真正需要的，但我喜欢它，以确保0没有活动类

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

使用按钮上的
.each（）
。然后，您可以简单地检查选项是1还是0。我认为在您的情况下，else并不是真正需要的，但我喜欢它，以确保0没有活动类

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

使用
$（this.addClass（'active'）
你是否检查你的控制台（chrome或firefox中的CTRL+SHIFT+i）以查看错误是什么？@Cagy79他已经写道没有错误。是的-我检查了控制台-这是我做的第一件事-没有错误你不能通过find将函数作为参数传递。相反，您应该使用find（“button”）.filter（function（）{…}）；使用
$（this.addClass（'active'）
你是否检查你的控制台（chrome或firefox中的CTRL+SHIFT+i）以查看错误是什么？@Cagy79他已经写道没有错误。是的-我检查了控制台-这是我做的第一件事-没有错误你不能通过find将函数作为参数传递。相反，您应该使用find（“button”）.filter（function（）{…}）；好的，它是有效的：）谢谢你，解释了区别：）一个问题-那么为什么第二部分有效呢？onClick actions运行良好-具有正确的参数和所有内容，但对于更改样式，我需要使用每个？？？@LuciusSnow，第二部分的工作原理是正确的语法，正如我所提到的
。find（）
没有回调，因此根据
find
方法文档，它将无法工作，它只接收一个参数：选择器，而您传递了第二个参数，这是一个匿名函数，因为没有人调用它而从未执行过（请参阅）。现在，
onClick
部分：
find
方法返回一个包含找到的元素的数组，即按钮，当您调用
时，单击
函数，它的回调将应用于所有元素。查看使用
find
更新的小提琴：好的-它工作：）谢谢你，解释了区别：）一个问题-那么为什么第二部分工作？onClick actions运行良好-具有正确的参数和所有内容，但对于更改样式，我需要使用每个？？？@LuciusSnow，第二部分的工作原理是正确的语法，正如我所提到的
。find（）
没有回调，因此根据
find
方法文档，它将无法工作，它只接收一个参数：选择器，而您传递了第二个参数，这是一个匿名函数，因为没有人调用它而从未执行过（请参阅）。现在，
onClick
部分：
find
方法返回一个包含找到的元素的数组，即按钮，当您调用
时，单击
函数，它的回调将应用于所有元素。使用
find
查看更新的小提琴：