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

这完全有效，但由于所有按钮都有id =＆＃34; myBtn＆＃34;当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循环结束时删除变量并放置＆＃34; var buttondisable = document.getElementById（＆＃34; myBtn＆＃34;）;＆＃34;在循环中，但这不起作用。

Answer 1

ID必须是唯一的，因此您需要为每个按钮使用不同的ID。要对它们进行分组，请提供相同的类，如果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>'; } }。像这样：

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

现在在javascript上你可以像这样定位特定的按钮：

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

OR

RawContact

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

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

3 个答案: