【问题标题】:Add class to element based on the day of the week根据星期几向元素添加类
【发布时间】:2020-10-23 02:02:45
【问题描述】:

我正在尝试向我的 Wordpress 网站添加一个功能,该功能可以根据星期几更改标题的颜色,以突出显示当天的每日特色食品。

该网站是使用 WPBakery Builder 构建的,并希望添加一些 Javascript 来完成这项工作。 thebanquetbar.com/daily-specials

我有七个手风琴部分,每个部分都有“daily-special-item”类

在页面底部,我有一个带有以下代码的 Raw 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;
}

【问题讨论】:

    标签: javascript wordpress wpbakery


    【解决方案1】:

    应该这样做:

    <!-- 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"});
    

    【讨论】:

    • 嗯,我只是直接应用 CSS,似乎没有任何改变。这是我的确切复制/粘贴:&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt; var dayOfWeek = (new Date).getDay(); var targetElement = $("h3.edgtf-accordion-title.ui-accordion-header")[dayOfWeek]; $(targetElement).css({"background-color": "#fff", "color":"#000"}); &lt;/script&gt;
    • 因为你把你的脚本——我给你的脚本——放在了 jQuery &lt;script&gt; 标签中。它们是两个不同的脚本。
    • @MattDimopoulos,我根据您的评论更新了答案,以说明您需要如何拥有单独的 &lt;script&gt; 标签。
    • 啊!我是个白痴!非常感谢马克!!!我做了一些调整,效果很好:&lt;script&gt; var dayOfWeek = (new Date).getDay(); var targetElement = $(".daily-special-item h3")[dayOfWeek]; $(targetElement).css({"background-color": "#fff", "color":"#000"}); &lt;/script&gt;
    猜你喜欢
    • 1970-01-01
    • 2016-10-22
    • 1970-01-01
    • 2020-01-16
    • 1970-01-01
    • 2016-09-26
    • 1970-01-01
    • 2020-07-03
    • 1970-01-01
    相关资源
    最近更新 更多