使用Javascript與兩個同一類的兩個div

Question

我現在處於一個大麻煩。在這裏，我有兩個有周日和週一例程的表格，我使用下面的代碼來突出顯示當前時間的任何行的背景。 它只突出顯示Sun的行，而不是Mon，或者如果我在週日的代碼編輯器中選擇Mon table，那麼它僅適用於星期一，並且不會突出顯示星期日的行。

這裏有什麼問題？任何幫助將主要讚賞。

這裏是我的代碼的現場演示

https://jsbin.com/desofuvevu/edit?html,css,js,output

function openCity(evt, cityName, today) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = 
 
    document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    if (typeof today == 'undefined') { 
 
    evt.currentTarget.className += " active"; 
 
    } else { 
 
    tablinks[today].className += " active"; 
 
    } 
 
} 
 

 
let now = new Date().getHours() * 100 + new 
 
Date().getMinutes(); 
 
let times = [45, 100, 145]; 
 
let ids = ['ra1', 'ra3', ]; 
 
let selected = ids[times.reduce((acc, curr, idx) => now >= 
 
    curr ? idx : acc)]; 
 
if (selected) 
 
    document.getElementById(selected).style.backgroundColor = 'red';

.tabcontent { display: none }

<div class="tab" style="margin-top: 1.6%; "> 
 
    <button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button> 
 

 
</div> 
 

 
<div id="Sun0" class="tabcontent" id="np"> 
 

 

 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td id="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td id="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div> 
 

 

 
<div id="Mon0" class="tabcontent"> 
 

 
    <!--Monnday--> 
 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td id="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
     <tr> 
 
     <td id="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

在你的代碼不應該使用相同的ID爲多個元素，選擇將只返回第一在這種情況下匹配元素。使用類，而不是和document.getElementsByClassName()將返回元素的列表，你將不得不遍歷列表，併爲每個元素設置樣式，這樣的事情：

function openCity(evt, cityName, today) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = 
 
    document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    if (typeof today == 'undefined') { 
 
    evt.currentTarget.className += " active"; 
 
    } else { 
 
    tablinks[today].className += " active"; 
 
    } 
 
} 
 

 
let now = new Date().getHours() * 100 + new 
 
Date().getMinutes(); 
 
let times = [45, 100, 145]; 
 
let classes = ['ra1', 'ra3', ]; 
 
let selected = classes[times.reduce((acc, curr, idx) => now >= 
 
    curr ? idx : acc)]; 
 
if (selected){ 
 
    var elements = document.getElementsByClassName(selected); 
 
    for(var i=0;i<elements.length; i++) 
 
     elements[i].style.background = 'red'; 
 
}

.tabcontent { display: none }

<div class="tab" style="margin-top: 1.6%; "> 
 
    <button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button> 
 

 
</div> 
 

 
<div id="Sun0" class="tabcontent" id="np"> 
 

 

 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Sunday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div> 
 

 

 
<div id="Mon0" class="tabcontent"> 
 

 
    <!--Monnday--> 
 
    <div style="overflow-x:auto;"> 
 
    <table> 
 
     <col width="65%"> 
 
     <col width="35%"> 
 
     <tr> 
 
     <th>Class</th> 
 
     <th>Time</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td class="ra1">10:15-11:00AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
     <tr> 
 
     <td class="ra3">11:00-11:45AM</td> 
 
     <td style="background:black; color:Yellow;">It is Monday</td> 
 

 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>