Question

我试图只在一周的某些天显示图像，所以我可以使此过程自动化，而不必每天晚上在家中进行。

我最初在设置此帖子时提到了该帖子：JavaScript Change CSS property of div depending on day of the week

现在，我将所有样式设置为display：none，并且尝试使用JS将一个类应用于一周中的相应日期，然后重写内联CSS，将显示设置为block。但是，某些操作无效。

如果需要的话，它在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>

Answer 1

这是普通的JS替代方案。感谢Dan的想法。

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

Answer 2

我不惹做这样的事情的时候添加CSS类多。

我以前使用过这个jQuery解决方案。更新为包括“ gene”类和“ img”类型。

app:layout_constraintGuide_percent

编辑以添加其他方法

占位符的图像（如果示出一个）：此方法不拉图像直到需要它，而不是拉个个与HTML，然后只是没有示出图像，如果它是错误的天

<script>
    $(document).ready(function () {
        $(".gene img").eq(new Date().getDay()).show();
    });
</script>

然后在jquery ready函数中指定图像。会检查一天是否存在，如果不存在，则只隐藏整个.gene div。

<div class="gene">
    <img />

</div>

在星期几更改课程

2 个答案: