将字符串与日期和月份进行比较

Question

我希望 javascript 根据当前日期和月份向 html 元素添加一个类。为此，我想将元素的类别（“09-20”，“09-21”，...）与当前日期的日期和月份进行比较。 不幸的是我的脚本不起作用。我是 javascript 的绝对初学者，很抱歉我的菜鸟错误。

<div class="grid-item" data-date="09-20"></div>
<div class="grid-item" data-date="09-21"></div>
<div class="grid-item" data-date="09-22"></div>
<div class="grid-item" data-date="09-23"></div>
<div class="grid-item" data-date="09-24"></div>
<div class="grid-item" data-date="09-25"></div>
<div class="grid-item" data-date="09-26"></div>

.grid-item {
  height: 130px;
  width: 130px;
  float: left;
  background: red;
  margin: 10px;
}
.today {
  background: yellow;
  border: red 1px solid;
}

$(function() {
   var a = new Date();     
    $(".grid-item").each(function() {
        var specifiedDate = $(this).data('date');       

        if (a.getMonth() + "-" + a.getDay() == specifiedDate) {
            $(this).addClass('today');
        }
    });
});

Answer 1

您的第一步是使用浏览器的开发控制台查看此处实际生成的值：

if (a.getMonth() + "-" + a.getDay() == specifiedDate) {

例如：

const a = new Date();
console.log(a.getMonth());
console.log(a.getDay());

这些价值观是您所期望的吗？ 目前的值是

8

和

5

。 以您正在使用的格式组合成一个字符串，即

"8-5"

。 这与您正在使用的任何 HTML 元素都不匹配。

如果结果出乎意料，下一步是查看这些函数的文档。

对于

getMonth

，我们了解到这些值是从 0 开始的。 所以九月是

8

。 我们需要在结果中添加

1

或从数据中的值中减去

1

。

对于

getDay

，我们了解到它返回的是本周的当前日期，而不是本月的当前日期。 为此，我们需要使用

getDate

来代替。

将这些东西放在一起，我们可以纠正逻辑：

$(function() {
   var a = new Date();     
    $(".grid-item").each(function() {
        var specifiedDate = $(this).data('date');       

        if ((a.getMonth() + 1) + "-" + a.getDate() == specifiedDate) {
            $(this).addClass('today');
        }
    });
});

.grid-item {
  height: 130px;
  width: 130px;
  float: left;
  background: red;
  margin: 10px;
}

.today {
  background: yellow;
  border: red 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="grid-item" data-date="9-20"></div>
<div class="grid-item" data-date="9-21"></div>
<div class="grid-item" data-date="9-22"></div>
<div class="grid-item" data-date="9-23"></div>
<div class="grid-item" data-date="9-24"></div>
<div class="grid-item" data-date="9-25"></div>
<div class="grid-item" data-date="9-26"></div>

请注意，前导

"0"

已从 HTML 中的月份中删除，我们从

1

中减去

getMonth()

，并使用

getDate()

。

---

当然也值得注意的是，正如另一位用户指出的那样循环甚至没有必要。 其他改进还可能涉及使用模板文字而不是连接字符串。 例如：

$(function() {
   var a = new Date();
   $(`div.grid-item[data-date="${(a.getMonth() + 1)}-${a.getDate()}"]`).addClass('today');
});

.grid-item {
  height: 130px;
  width: 130px;
  float: left;
  background: red;
  margin: 10px;
}

.today {
  background: yellow;
  border: red 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="grid-item" data-date="9-20"></div>
<div class="grid-item" data-date="9-21"></div>
<div class="grid-item" data-date="9-22"></div>
<div class="grid-item" data-date="9-23"></div>
<div class="grid-item" data-date="9-24"></div>
<div class="grid-item" data-date="9-25"></div>
<div class="grid-item" data-date="9-26"></div>