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

這工作完全，但因爲所有的按鈕具有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 「）;」在循環內部，但是這不起作用。

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

現在上的JavaScript可以針對特定的按鈕，只有這樣的：

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

OR

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

然後使用getElementsByClassName()通過所有按鈕的JS代碼迴路：

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