使用两个相同类的两个div的Javascript

Question

我现在遇到了大麻烦。在这里，我有两个表，周日和周一的例程，我使用下面的代码来突出显示当前时间任何行的背景。 它只突出显示Sun的行而不是Mon，或者如果我在星期日之前在代码编辑器中使用Mon表，那么它仅适用于星期一，并且不突出显示星期日的行。

这可能是什么问题？任何帮助都会受到很大的赞赏。

以下是我的代码

的现场演示

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，选择器只会在这种情况下返回第一个匹配的元素。使用class而不是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>