我正在学习javascript循环和数组,我想知道是否可以获取所有按钮属性,例如在我单击“提交”按钮时的代码中,我想遍历命名为的所有按钮(带有“ seat”类)属性“ value”并设置其“ value = 1”语句以将背景色更改为红色。
<div id="tickets">
<button value="0" class="seat">1</button>
<button value="0" class="seat">2</button>
<button value="0" class="seat">3</button>
<button value="0" class="seat">4</button>
<button value="0" class="seat">5</button>
<button value="0" class="seat">6</button>
<button value="0" class="seat">7</button>
<button value="0" class="seat">8</button>
<button value="0" class="seat">9</button>
<button value="0" class="seat">10</button>
<button id="submit-btn">Submit</button>
</div>
有一个jQuery代码
$(".seat").click(function (e) {
e.preventDefault();
let value = $(this).attr("value");
if (value === "0") {
$(this).addClass("active");
$(this).attr("value", "1");
}else if (value === "1"){
$(this).removeClass("active");
$(this).attr("value", "0");
}
});
在这里我将值添加到1,并且一切正常,添加类激活并更改值,现在我尝试进行循环并检查所有按钮的值,如果尝试添加1,则将背景颜色更改为红色。 ,但我只是不知道该怎么做,尝试了一些可行的解决方案。
编辑 尝试使用@Kenny这样的循环不起作用
$("#submit-btn").click(function () {
$(".seat").each((elem) => {
if ($(elem).attr('value') === '1') {
$(elem).addClass('reserverd');
}
});
});
答案 0 :(得分:5)
怎么样?
$(".seat").each((index, elem) => {
if ($(elem).attr('value') === '1') {
$(elem).addClass('background-red');
}
});
答案 1 :(得分:4)
您的click
处理程序与this
一起运行,指向已单击的按钮。但是在该处理程序(或用于完全不同的按钮的处理程序)中,您还可以像挂接处理程序时一样获得所有按钮:$(".seat")
。您可以使用each
遍历它。在each
中,this
(与事件处理程序一样)是对该循环的按钮的引用。
因此,您可以做您在处理程序中所做的事情,而只是在each
回调中完成>
// (You'd probably have this inside an event handler)
$(".seat").each(function() {
let value = $(this).attr("value");
if (value === "0") {
$(this).addClass("active");
$(this).attr("value", "1");
}else if (value === "1"){
$(this).removeClass("active");
$(this).attr("value", "0");
}
});
我可能会更改更新value
的代码,并且只列出一些类,仅列出FWIW:
// (You'd probably have this inside an event handler)
$(".seat").each(function() {
// HTML form elements have a `value` property you can use directly, no
// need for jQuery to do it.
this.value = this.value === "0" ? "1" : "0";
// jQuery does make toggling a class a bit easier cross-browser:
$(this).toggleClass("active", this.value === "1")
// That said, on modern browsers (*not* IE, not even IE11), you could do this:
// this.classList.toggle("active", this.value === "1")
});
(可悲的是,尽管IE10和IE11具有classList
和toggle
,但它们不支持第二个参数。)