Как пройти l oop через все элементы и получить их атрибут Javascript

Question

Я изучаю javascript циклы и массивы, и мне интересно, могу ли я получить все атрибуты кнопок, как в моем коде, когда я нажимаю кнопку отправки, я хочу l oop через все кнопки (с классом " 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, и все работает нормально, его добавление класса Active и изменение значения, теперь я попытался сделать l oop и проверить все значения кнопок, и если его 1, чтобы добавить класс, который меняет цвет фона на красный, но я просто не могу понять, как это сделать, пробовал некоторые решения, не сработало.

EDIT Пробовал с l oop как это от @Kenny не работает

$("#submit-btn").click(function () { 

$(".seat").each((elem) => {
    if ($(elem).attr('value') === '1') {
       $(elem).addClass('reserverd');
    }
 }); 

}) ;

Answer 1

Как насчет этого?

$(".seat").each((index, elem) => {
   if ($(elem).attr('value') === '1') {
      $(elem).addClass('background-red');
   }
});

Answer 2

Ваш обработчик click запускается с this, относящимся к нажатой кнопке. Но в этом обработчике (или обработчике для совершенно другой кнопки) вы также можете получить все кнопки так же, как и при подключении обработчика: $(".seat"). Вы можете пройти через него oop с помощью each. Внутри each, this (как и в случае с обработчиком событий) - это ссылка на кнопку для этого l oop.

Итак, вы могли делать то, что вы сделали в ваш обработчик, вместо этого просто в обратном вызове 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, они не поддерживают второй аргумент)