JavaScript根据星期几更改div的CSS属性

时间:2022-10-21 10:53:10

I'm in the process of creating a website. I'm displaying the opening hours. And the client has asked for the current day of the week to be highlighted.E.G. every day is displayed in the color black box but today's date is in a red box.

我正在创建一个网站。我正在展示开放时间。并且客户要求突出显示当周的当天.E.G。每天都会显示在黑色框中,但今天的日期显示在红色框中。

var d = new Date();
var weekday = new Array(7);
weekday[0] =  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n = weekday[d.getDay()];

if (n = 'Thursday') {
    $('coloured-box').css({"color":"green"});
}

The above is what I have no idea if it's right wrong or nearly there.

以上就是我不知道它是错误还是差不多。

2 个解决方案

#1


8  

The simplest way to do this would be to get the current day, then set the class on the given element by its index in its container, like this:

最简单的方法是获取当前日期,然后通过其容器中的索引在给定元素上设置类,如下所示:

$('.coloured-box span').eq(new Date().getDay()).addClass('today');
.coloured-box span.today { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coloured-box">
  <span>Sunday</span>
  <span>Monday</span>
  <span>Tuesday</span>
  <span>Wednesday</span>
  <span>Thursday</span>
  <span>Friday</span>
  <span>Saturday</span>
</div>

#2


0  

I think you may have a logic error.

我想你可能有一个逻辑错误。

if (n = 'Thursday') {
    $('coloured-box').css({"color":"green"});
}

You need to do a comparison using ==

您需要使用==进行比较

if (n == 'Thursday') {
    $('coloured-box').css({"color":"green"});
}

#1


8  

The simplest way to do this would be to get the current day, then set the class on the given element by its index in its container, like this:

最简单的方法是获取当前日期,然后通过其容器中的索引在给定元素上设置类,如下所示:

$('.coloured-box span').eq(new Date().getDay()).addClass('today');
.coloured-box span.today { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coloured-box">
  <span>Sunday</span>
  <span>Monday</span>
  <span>Tuesday</span>
  <span>Wednesday</span>
  <span>Thursday</span>
  <span>Friday</span>
  <span>Saturday</span>
</div>

#2


0  

I think you may have a logic error.

我想你可能有一个逻辑错误。

if (n = 'Thursday') {
    $('coloured-box').css({"color":"green"});
}

You need to do a comparison using ==

您需要使用==进行比较

if (n == 'Thursday') {
    $('coloured-box').css({"color":"green"});
}