如何遍历所有元素并获取其属性Javascript

时间:2020-05-06 11:22:01

标签: javascript jquery

我正在学习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');
    }
 }); 

});

2 个答案:

答案 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具有classListtoggle,但它们不支持第二个参数。)