问题描述
我正试图在我的WordPress网站上添加一个功能,以根据一周中的某一天更改标题的颜色,以突出显示当天的每日特色食品。
该网站是使用WPBakery Builder构建的,希望添加一些Javascript来完成此操作。 thebanquetbar.com/daily-specials
我有七个手风琴部门,每个部门都有'daily-special-item'类。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$('.daily-special-item').eq(new Date().getDay()).addClass('daily-today');
</script>
这是基于以下答案:Adding a class based on current day of the week
我在想,由于我的手风琴不在同一个div中,所以会引起问题吗?
有没有一种方法可以使用Javascript并根据星期几来定位每个手风琴并更改标题的颜色?
CSS:
.daily-today{
background: #fff;
color: #000;
}
解决方法
这应该做到:
<!-- Here's the jQuery script. Don't touch it. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here's your custom script that does the highlight -->
<script>
var dayOfWeek = (new Date).getDay();
var targetElement = $("h3.edgtf-accordion-title.ui-accordion-header")[dayOfWeek];
$(targetElement).addClass("daily-today"); //or apply CSS directly as shown below
</script>
我注意到在 live 页面上的CSS中尚未定义该类,因此我可以通过将CSS属性直接应用于以下元素来达到相同的效果:
$(targetElement).css({"background-color": "#fff","color":"#000"});