隱藏/顯示基於星期幾的div嗎？

我正在爲一家餐廳的頁面工作，我正在嘗試在一週的特定一天進行一次div展示。我發現這個JavaScript上的另一個問題在這裏Stackoverflow和它的工作相當不錯：隱藏/顯示基於星期幾的div嗎？

... 
<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，但如果我有兩個不同的div具有相同的ID它不會在第二個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>

請任何幫助，非常感謝。

來源

2017-06-16 Eliezer Montoyo

Id的應該是唯一的。此外，'getElementById'返回1個單個元素，'getElementsByClassName'返回具有相同類的元素數組。所以，請改用類。 – doutriforce

由於@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>

來源

2017-06-16 20:51:31

哈哈。打敗我吧。我正要發佈相同的東西！ – Simon

getElementsByClassName是要走的路！謝謝一堆。 –

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>

來源

2017-06-16 20:57:05 RaindeerKernel

隱藏/顯示基於星期幾的div嗎？

回答

相關問題