使用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>