Javascript добавляет класс к элементам, но не определяет, какой класс должен быть для каждого

Question

Редактировать

У меня есть 2 купона, у них обоих есть .new-купон, когда на самом деле нужно сказать .new-купон, а другой - .old-купон.Кажется, применяется один и тот же класс для каждого элемента на странице с этим классом вместо вычисления того, каким классом он должен быть для каждого элемента.

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

Редактировать: не дублировать.

Пожалуйста, не помечайте это как дубликат, не связывая меня с ресурсом, который объясняет, как исправить мои проблемы, вы все заявляете о проблемах, но никто не излагает метод их устранения.Пожалуйста, помогите в помеченном дубликате только подробности о том, что идентификаторы должны быть уникальными, а не о том, как решить мою проблему.

Answer 1

Ну, ваш код, по сути, только применяет ваш новый класс к .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 в цикл, чтобы проверить каждый в отдельности.Надеюсь, что это поможет вам подумать о способах решения вашей проблемы.