时间戳

首页 > 解决方案 > 按星期几更改课程

javascript - 按星期几更改课程

问题描述

我试图让图像只在一周中的某些日子出现，这样我就可以自动化这个过程，而不必每天晚上都在家里这样做。

我在最初设置时参考了这篇文章：JavaScript Change CSS property of div based on day of week

现在我将他们所有的样式设置为显示：无，并尝试使用 JS 将类应用于一周中的适当日期，然后覆盖内联 CSS，将显示设置为阻止。但是，有些东西不起作用。

如果相关的话，这是在 Squarespace 上。

  $('.gene img').eq(new Date().getDay()).addClass('displayed');
.gene img.displayed[style] {display:block !important;}
  
<a href="/genes-special/">

<div class="gene">
  
<img name="SUNDAY">
    
<img name="MONDAY" style="display:none; margin-top:7px;" src="https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b6382c74c50461d189c28/1548444556260/1-28.png?format=1000w">
  
<img  name="TUESDAY" style="display:none; margin-top:7px;" src="https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b642a0ebbe8fdff7443a5/1548444720987/1-29.png?format=1000w">
  
<img  name="WEDNESDAY" style="display:none; margin-top:7px;"
src="https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b63fa8a922d0881f198c0/1548444679119/1-30.png?format=1000w">
  
<img name="THURSDAY" style="display:none; margin-top:7px;" 
 src="https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b63f2c74c50461d18a1e4/1548444668557/?format=1000w">
  
 <img  name="FRIDAY" style="display:none; margin-top:7px;" 
 src="https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b63e940ec9a53af2de8b6/1548444655398/?format=1000w">
    
<img name="SATURDAY"> 
    
</div>   
</a>

标签： javascripthtmlcss

解决方案

这是一个简单的 JS 替代方案。感谢丹的想法。

(function() {

  var hrefs = new Array(7);

  hrefs[1] = "https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b6382c74c50461d189c28/1548444556260/1-28.png?format=1000w";
  hrefs[2] = "https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b642a0ebbe8fdff7443a5/1548444720987/1-29.png?format=1000w";
  hrefs[3] = "https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b63fa8a922d0881f198c0/1548444679119/1-30.png?format=1000w";
  hrefs[4] = "https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b63f2c74c50461d18a1e4/1548444668557/?format=1000w";
  hrefs[5] = "https://static1.squarespace.com/static/588652c7a5790a5d29f14d94/t/5c4b63e940ec9a53af2de8b6/1548444655398/?format=1000w";

  var dayNum = new Date().getDay();
  var image = document.createElement("img");

  if (dayNum in hrefs) {
    document.getElementById("gene").appendChild(image);
    image.src = hrefs[dayNum]
  }

})();
<a href="/genes-special/">

  <div id="gene">
  
  </div>
</a>

推荐阅读