Javascript在不计算每个Div的情况下为Div添加相同的类

我有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 = "
" + couponExpired + "
"; } 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); }); 

用于变量的HTML：

 
    
Days
 
Hours
 
Minutes
 
Seconds
  

用于在优惠页面上显示优惠券的HTML：

 
 format('Y'); $month = DateTime::createFromFormat('Ymd H:i:s', get_field('offer_voucher_deadline'))->format('m'); $day = DateTime::createFromFormat('Ymd H:i:s', get_field('offer_voucher_deadline'))->format('d'); $hour = DateTime::createFromFormat('Ymd H:i:s', get_field('offer_voucher_deadline'))->format('H'); $minute = DateTime::createFromFormat('Ymd H:i:s', get_field('offer_voucher_deadline'))->format('i'); $second = DateTime::createFromFormat('Ymd H:i:s', get_field('offer_voucher_deadline'))->format('s'); $humanDate = DateTime::createFromFormat('Ymd H:i:s', get_field('offer_voucher_deadline'))->format('D jS M Y'); $expiredText = get_field('offer_voucher_expired'); ?> 
  
 
 
 
 
  <a class="button" href="https://stackoverflow.com/questions/52561225/javascript-adds-same-class-to-divs-without-calculating-for-each-div/" title="See Offer Details">See  Details 
 
 
Valid Until:
 
 
 
 
  

编辑

我完全理解问题所在，并将代码更新为以下内容：

 $('.couponDiv').each(function() { 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) { $(this).addClass("old-coupon"); } else if ((nowDateNew.getTime() - newOldDate.getTime()) < 0) { $(this).addClass("new-coupon"); } }); 

但是，我不知道如何制作：

 var startDate = $("#clockdiv .start").attr("rel"); 

适用于$ this所以它的$ this #clockdiv .start因为它会起作用我相信…

编辑

我修改了一行代码来读取：

 var startDate = $(this).find("#clockdiv .start").attr("rel"); 

现在只将类添加到第一个商品而不是第二个商品，然后我尝试重复：

$（本）.find（）

围绕初始变量然后移动：

 $('.couponDiv').each(function() { 

但是，在文档就绪函数下方的顶部，这会停止添加任何类。

Answer 1

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

在上面的代码中，您选择了所有.couponDiv来添加类old-coupon然后再次选择所有.couponDiv来添加类new-coupon 。 这里的条件没有意义，因为任何匹配你仍然为所有元素添加类。

您必须将哪些元素属于“旧”并且元素属于“新”。 然后分别添加类名。

Answer 2

这是你需要的吗？

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

Answer 3

经过一些重建并使用$ this后，我能够实现这个目的：

 $('.couponWrap .coupons li').each(function() { // Set the date we're counting down to var deadlineYear = $(this).find("div .clockdiv .year").attr("rel"); var deadlineMonth = $(this).find("div .clockdiv .month").attr("rel"); var deadlineDay = $(this).find("div .clockdiv .days").attr("rel"); var deadlineHour = $(this).find("div .clockdiv .hours").attr("rel"); var deadlineMinute = $(this).find("div .clockdiv .minutes").attr("rel"); var deadlineSecond = $(this).find("div .clockdiv .seconds").attr("rel"); var couponExpired = $(this).find("div .clockdiv").attr("rel"); var countDownDate = new Date(deadlineYear + "/" + deadlineMonth + "/" + deadlineDay + " " + deadlineHour + ":" + deadlineMinute + ":" + deadlineSecond).getTime(); var startDate = new Date($(this).find("div .clockdiv .start").attr("rel")); var self = $(this); // 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 = "
" + couponExpired + "
"; } //Works but only for 1st start date //var testDate = $("div .clockdiv .start").attr("rel"); //2018/09/28 17:00:00 var startDateNew = new Date(startDate); var startDateNewer = new Date(startDate); var newOldDate = new Date(startDateNewer.setDate(startDateNew.getDate() + 7)); //alert(startDate + ", " + startDateNew + ", " + startDateNewer + ", " + newOldDate); //This works fine var nowDateNew = new Date().getTime(); //alert(nowDateNew - newOldDate.getTime()); if (days <= 7) { self.find('div.couponDiv').addClass("old-coupon"); } else if ((nowDateNew - newOldDate.getTime()) < 0) { self.find('div.couponDiv').addClass("new-coupon"); } }, 1000); });