根据星期几向元素添加 class
Add class to element based on the day of the week
我正在尝试向我的 Wordpress 网站添加一个功能,该功能可以根据星期几更改标题的颜色,以突出显示当天的每日特色美食。
该网站是使用 WPBakery Builder 构建的,希望添加一些 Javascript 来完成这项工作。宴会吧.com/daily-specials
我有七个手风琴部分,每个部分都有 class 'daily-special-item'
在页面底部,我有一个包含以下代码的原始 JS 行:
<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>
我注意到 class 尚未在 live 页面上的 CSS 中定义,因此我能够在那里获得相同的效果通过将 CSS 属性直接应用于元素,如下所示:
$(targetElement).css({"background-color": "#fff", "color":"#000"});
我正在尝试向我的 Wordpress 网站添加一个功能,该功能可以根据星期几更改标题的颜色,以突出显示当天的每日特色美食。
该网站是使用 WPBakery Builder 构建的,希望添加一些 Javascript 来完成这项工作。宴会吧.com/daily-specials
我有七个手风琴部分,每个部分都有 class 'daily-special-item'
在页面底部,我有一个包含以下代码的原始 JS 行:
<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>
我注意到 class 尚未在 live 页面上的 CSS 中定义,因此我能够在那里获得相同的效果通过将 CSS 属性直接应用于元素,如下所示:
$(targetElement).css({"background-color": "#fff", "color":"#000"});