时间戳

首页 > 解决方案 > Javascript 向元素添加类，但不能确定每个元素应该是什么类

javascript - Javascript 向元素添加类，但不能确定每个元素应该是什么类

问题描述

编辑

我有 2 张优惠券显示，他们都有 .new-coupon 实际上一个应该说 .new-coupon 而一个应该说 .old-coupon。它似乎为页面上的每个元素应用相同的类，而不是计算每个元素应该是哪个类。

jQuery(document).ready(function($) {
// Set the date we're counting down to
  var deadlineYear = $("#clockdiv .year").attr("rel");
  var deadlineMonth = $("#clockdiv .month").attr("rel");
  var deadlineDay = $("#clockdiv .days").attr("rel");
  var deadlineHour = $("#clockdiv .hours").attr("rel");
  var deadlineMinute = $("#clockdiv .minutes").attr("rel");
  var deadlineSecond = $("#clockdiv .seconds").attr("rel");
  var couponExpired = $("#clockdiv").attr("rel");

  var countDownDate = new Date(deadlineYear + "/" + deadlineMonth + "/" + deadlineDay + " " + deadlineHour + ":" + deadlineMinute + ":" + deadlineSecond).getTime();

  // Update the count down every 1 second
  var x = setInterval(function() {

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"

document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML= seconds;

// If the count down is over, write some text 
if (distance < 0) {
    clearInterval(x);
    document.getElementById("clockdiv").innerHTML = "<p>" + couponExpired + "</p>";
}

var startDate = $("#clockdiv .start").attr("rel"); //2018/09/28 17:00:00

  var startDateNew = new Date(startDate);
  var newOldDate = new Date(startDateNew.setDate(startDateNew.getDate() + 7));
  var nowDateNew = new Date(now);

  if (days <= 7) {
      $('.couponDiv').addClass("old-coupon");
  } else if ((nowDateNew.getTime() - newOldDate.getTime()) < 0) {
      $('.couponDiv').addClass("new-coupon");
  }    
  }, 1000);
});

编辑：不重复。

如果没有将我链接到解释如何解决我的问题的资源，请不要将其标记为重复，你们都说明了问题，但没有人说明解决问题的方法。请协助，因为标记的重复帖子仅详细说明 ID 必须是唯一的，而不是如何解决我的问题。

标签： javascriptjquerydatetime

解决方案

好吧，您的代码基本上只是将您的新类应用于 .couponDiv 一次。您的 if 语句被调用一次，然后相应地应用新类，旧优惠券或新优惠券。要根据您的参数单独检查 .couponDiv，您需要将它们包装在一个循环中。类似这样的东西：

$('.couponDiv').each(function() {
  if(days <= 7) {
     $(this).addClass('old-coupon')
  } else if ((nowDateNew.getTime() - newOldDate.getTime()) < 0) {
     $(this).addClass('new-coupon')
  }
})

至于其余的代码。您似乎只是根据系统日期检查#clockdiv，这是为什么它们都被赋予相同的类的另一个原因，因为所有.couponDiv 都以相同的值使用。没有检查其他值。如果您有其他数据要从 .couponDiv 中提取以在 if 语句中进行检查，这也将为您提供所需的结果。

所以总结一下。拉入 div 数据以检查 if 语句。并将您的 .couponDiv 放在一个循环中以单独检查每个。希望这可以帮助您思考解决问题的方法。

推荐阅读