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

【问题标题】：Javascript hide/show div based on the day of the week?基于星期几的Javascript隐藏/显示div？
【发布时间】：2015-06-24 00:05:14
【问题描述】：

我正在尝试创建一个根据星期几更改内容的动态页面。我以为我有解决方案，但我似乎无法让它发挥作用：

<html>
<head>
<script type="text/javascript">
function showhide(id) {
    var d = new Date();
    var s = document.getElementById[d.getDay()];
    s.style.display = (s.style.display == 'block') ? 'none' : 'block';

}
</script>
</head>
<body onload="javascript:showhide[d.getDay()]">
<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>
</body>
</html>

我怀疑这要么是一件非常简单的事情，我想得太多了，要么是我还没有掌握。任何为我指明正确方向的帮助将不胜感激。

到目前为止，我的来源是 w3schools、jsfiddle 和这里（我从这里的另一篇文章中借用了我的代码的 sn-p）。

提前感谢您的回复。

【问题讨论】：

标签： javascript html

【解决方案1】：

您的代码有 2 个问题。

第一个问题，您似乎混淆了 [] 和 ()

[] 用于访问数组中的元素或对象中的属性
() 用于调用函数

第二个问题，您试图在 HTML 中使用 d 变量，即使它仅在您的 showhide 函数中可用（在函数中声明的变量仅在此函数中可用，并且它是子函数）。

因此要修复您的代码，您应该：

将document.getElementById[d.getDay()]; 替换为document.getElementById(d.getDay());

并在您的 HTML 中将 <body onload="javascript:showhide[d.getDay()]"> 替换为 <body onload="showhide()">

最后，根据您想要实现的目标，您应该考虑是否真的需要每天创建 DOM 元素，或者您是否可以像这样只注入您需要的数据：

<html>
  <head>
    <script type="text/javascript">
      function injectDay() {
        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
          'Friday', 'Saturday'];
        var date = new Date();

        document.querySelector('.dayContainer').innerHTML = days[date.getDay()];
      }
    </script>
  </head>
  <body onload="injectDay()">
    <div>
      <h3 class="dayContainer"></h3>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

几乎在那里，将 document.getElementById[] 更改为 document.getElementById() 并将脚本添加到页面底部（在您的标记下方和 '' 标记之前），您可以删除正文 onload 事件，只需调用如下函数：

...
<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>

见http://jsfiddle.net/sjmcpherso/wyoffLw6/

通过调用页面底部的函数（在您的标记之后），当页面上的所有元素都已加载时，您就可以有效地触发该函数

【讨论】：

非常感谢！这个答案非常有效。我一定会拯救这个小宝石。

【解决方案3】：

function myDay() {
        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        var date = new Date();
        document.querySelector('.dayname').innerHTML = days[date.getDay()];

        if(date.getDay()%2!=0){
             document.querySelector('.dayname2').innerHTML = days[date.getDay()-1];
             document.querySelector('.dayname3').innerHTML = days[date.getDay()+1];
            document.querySelector('.dayname').innerHTML = ""; //same hide
       }else{
             document.querySelector('.dayname').innerHTML = days[date.getDay()];
              document.querySelector('.dayname2').innerHTML = days[date.getDay()-2];
             document.querySelector('.dayname3').innerHTML = days[date.getDay()+2];  
       } 
      }

<html>
  <head>
  </head>
  <body onload="myDay()">  
       <table>
         <tr>
             <td class="dayname2" id ="AA">
             </td>
             <td class="dayname">
             </td>
             <td class="dayname3">
             </td>
         </tr>
      </table>        
  </body>
</html>

【讨论】：