Question

我在一家餐馆的页面上工作，并且我试图在一周的特定日期进行一场div节目。我在Stackoverflow的另一个问题上发现了这个javascript，并且效果非常好：

...
<div id="6" style="display:none">
   <h3>Saturday</h3>

</div>
<script>
  function showhide() {
    var d = new Date();
    var s = document.getElementById(+d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
  }
  showhide();
</script>
</body>
</html>

如果我只想在一周的特定日期显示一个div，但是如果我有两个具有相同id的不同div，它将无法在第二个div上工作。例如：

...
<div id="FIRST">
<div id="0" style="display:none">
   <h3>Sunday</h3>

</div>
<div id="1" style="display:none">
   <h3>Monday</h3>

</div>
<div id="2" style="display:none">
   <h3>Tuesday</h3>

</div>
<div id="3" style="display:none">
   <h3>Wednesday</h3>

</div>
<div id="4" style="display:none">
   <h3>Thursday</h3>

</div>
<div id="5" style="display:none">
   <h3>Friday</h3>

</div>
<div id="6" style="display:none">
   <h3>Saturday</h3>

</div>
</div>

<div id="SECOND">
<div id="0" style="display:none">
   <h3>Sunday2</h3>

</div>
<div id="1" style="display:none">
   <h3>Monday2</h3>

</div>
<div id="2" style="display:none">
   <h3>Tuesday2</h3>

</div>
<div id="3" style="display:none">
   <h3>Wednesday2</h3>

</div>
<div id="4" style="display:none">
   <h3>Thursday2</h3>

</div>
<div id="5" style="display:none">
   <h3>Friday2</h3>

</div>
<div id="6" style="display:none">
   <h3>Saturday2</h3>

</div>
</div>
<script>
  function showhide() {
    var d = new Date();
    var s = document.getElementById(+d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
  }
  showhide();
</script>
</body>
</html>

请非常感谢任何帮助。

Answer 1

正如@doutriforce评论的那样，使用getElementsByClassName获取元素并显示它们，看看这个小提琴：

function showhide() {
  var d = new Date();
  var s = document.getElementsByClassName(d.getDay());
  for (var i = 0; i < s.length; i++) {
    s[i].style.display = 'block';
  }
}

showhide();

<div id="FIRST">
  <div class="0" style="display:none">
    <h3>Sunday</h3>

  </div>
  <div class="1" style="display:none">
    <h3>Monday</h3>

  </div>
  <div class="2" style="display:none">
    <h3>Tuesday</h3>

  </div>
  <div class="3" style="display:none">
    <h3>Wednesday</h3>

  </div>
  <div class="4" style="display:none">
    <h3>Thursday</h3>

  </div>
  <div class="5" style="display:none">
    <h3>Friday</h3>

  </div>
  <div class="6" style="display:none">
    <h3>Saturday</h3>

  </div>
</div>

<div class="SECOND">
  <div id="0" style="display:none">
    <h3>Sunday2</h3>

  </div>
  <div class="1" style="display:none">
    <h3>Monday2</h3>

  </div>
  <div class="2" style="display:none">
    <h3>Tuesday2</h3>

  </div>
  <div class="3" style="display:none">
    <h3>Wednesday2</h3>

  </div>
  <div class="4" style="display:none">
    <h3>Thursday2</h3>

  </div>
  <div class="5" style="display:none">
    <h3>Friday2</h3>

  </div>
  <div class="6" style="display:none">
    <h3>Saturday2</h3>

  </div>
</div>

Answer 2

ID属性在HTML页面上应始终是唯一的（理想情况下，在整个项目中）。当您分配ID两次时，JavaScript会变得混乱。

相反，使用类。你可以这样做（为简洁起见缩短）：

<div id="FIRST">
  <div class="0" style="display:none">
    <h3>Sunday</h3>
  </div>

  <div class="1" style="display:none">
    <h3>Monday</h3>
  </div>

  <div class="2" style="display:none">
    <h3>Tuesday</h3>
  </div>

  <div class="3" style="display:none">
    <h3>Wednesday</h3>
  </div>

  <div class="4" style="display:none">
    <h3>Thursday</h3>
  </div>

  <div class="5" style="display:none">
    <h3>Friday</h3>
  </div>

  <div class="6" style="display:none">
    <h3>Saturday</h3>
  </div>

</div>

<div id="SECOND">
  <div class="0" style="display:none">
    <h3>Sunday2</h3>
  </div>

  <div class="1" style="display:none">
    <h3>Monday2</h3>
  </div>

  <div class="2" style="display:none">
    <h3>Tuesday2</h3>
  </div>

  <div class="3" style="display:none">
    <h3>Wednesday2</h3>
  </div>

  <div class="4" style="display:none">
    <h3>Thursday2</h3>
  </div>

  <div class="5" style="display:none">
    <h3>Friday2</h3>
  </div>

  <div class="6" style="display:none">
    <h3>Saturday2</h3>
  </div>

</div>
<script>
  function showhide() {
    var d = new Date();
    var s = document.getElementsByClassName(+d.getDay());
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';
  }
  showhide();
</script>

隐藏/显示基于星期几的div？

2 个答案: