使用 JavaScript 检查具有相同 ID 的多个按钮

Question

我正在尝试建立一个人们可以进行预订的网站，我正在使用数据库来收集时间并使用 php 来显示它。它显示 5 天内的所有时间，包括不可用的时间。它们显示为按钮，都共享相同的 id。我在最后一步卡住了，禁用了不可用时间的按钮。

由于这些按钮之间的唯一区别是它们的背景颜色（灰色表示不可用，绿色表示可用），我想我会使用一个 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>';
    }
}

这完全有效，但由于在 disablebuttons() 执行时所有按钮都有 id="myBtn"，因此它只查看第一个按钮，遵循以下代码：

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");”在循环内部，但是这不起作用。

Answer 1

ID 必须是唯一的，因此您需要为每个按钮使用不同的 ID。要将它们分组，请给出相同的 class 如果它们可用，则说 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");

Answer 2

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;    
     }
}

希望这会有所帮助。

Answer 3

如果您获取父元素并循环其子元素，则可以检查每个元素及其背景并将其禁用。

    $('#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;
        } 
    });