Проверьте несколько кнопок с одинаковым идентификатором с помощью JavaScript

Question

Проверьте несколько кнопок с одинаковым идентификатором с помощью JavaScript

Я пытаюсь создать веб-сайт, где люди могут сделать предварительный заказ, я использую базу данных для сбора времени и php для его отображения. Отображается все время в течение 5 дней, включая те, которые недоступны. Они отображаются в виде кнопок с одинаковым идентификатором. Я застрял на последнем шаге, отключая кнопки с недоступными временами.

Поскольку единственное различие между этими кнопками заключается в их цвете фона (серый для недоступного и зеленый для доступного), я решил использовать функцию javascript, в которой он проверяет цвета фона блоков в условии, а затем серые отключаются и зеленые дают форму. Однако: он будет проверять только цвет первой кнопки, и все кнопки дают тот же результат, что и эта.

На моей странице всегда будет отображаться 50 кнопок, поэтому я подумал, что мог бы просто использовать цикл while с автоматическим уменьшением в конце, однако я не могу понять, как проверить следующую кнопку, теперь она будет проверять только ту же самую кнопка снова и снова. Вот часть php-кода, показывающая кнопки нужного цвета (я вычеркнул некоторые несущественные части):

while($row = $results->fetch_assoc()){
$color = "##8fd6a5";
if (!empty($row['unavailable'])){
$color = "##9b9393";
}

$time= new DateTime($row['time']);

if ($time->format('H') == '08'){
echo '<button id="myBtn" onload="disablebuttons()" class="buttonstyle"style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>';
}
}

Это работает полностью, но, поскольку все кнопки имеют id = «myBtn» при выполнении disablebuttons (), он смотрит только на первую кнопку, следующую за этим кодом:

function disablebuttons() {
var amountButton = 50;
while (amountButton > 0){
var buttondisable = document.getElementById("myBtn");

if (buttondisable.style.backgroundColor == "rgb(155, 147, 147)"){
document.getElementById("myBtn").disabled = true;
amountButton--;
}
}
}

Я пытался удалить переменную в конце цикла while и поместить «var buttondisable = document.getElementById (» myBtn «);» внутри цикла, однако это не сработало.

-3

css html5 javascript php

Решение

Другие решения

id атрибут должен быть уникальным в том же документе, поэтому используйте общие классы вместо idдля ваших кнопок, как:

if ($time->format('H') == '08'){
echo '<button onload="disablebuttons()" class="buttonstyle myBtn"style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>';
}

Затем в вашем коде JS переберите все кнопки, используя getElementsByClassName() :

var buttons = document.getElementsByClassName('myBtn');

for(var i = 0; i < buttons.length; i++)
{
//Your logic here

var button = buttons[i];

if (button.style.backgroundColor == "rgb(155, 147, 147)")
{
button.disabled = true;
}
}

Надеюсь это поможет.

0

если вы получили родительский элемент и зациклили его дочерние элементы, вы можете проверить каждый элемент и его фон и отключить его.

    $('#mydiv').children('button').each(function () {
// "this" is the current element in the loop
if($(this).css("background-color") == "rgb(155, 147, 147)"){
$(this).disabled = true;
}
});

0

Источник

Accepted Answer

Идентификаторы должны быть уникальными, поэтому для каждой кнопки необходимо использовать разные идентификаторы. Чтобы сгруппировать их, дайте тогда же учебный класс сказать available если они доступны unavailable если его нет в наличии. Что-то вроде этого:

while($row = $results->fetch_assoc())
{
$color = "##8fd6a5";
$class= 'available'
if (!empty($row['unavailable']))
{
$color = "##9b9393";
$class= 'unavailable'
}
$time= new DateTime($row['time']);
if ($time->format('H') == '08')
{
echo '<button id="myBtn" onload="disablebuttons()" class="buttonstyle '.$class.'" style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>';
}
}

Теперь в javascript вы можете указывать конкретные кнопки только так:

var buttondAvailable = document.getElementByClassName("available");

ИЛИ ЖЕ

var buttondUnavailable = document.getElementByClassName("unavailable");

0