JS在5pm之前开始倒计时,并与其他3pm产品一起发行

时间:2019-06-17 16:20:07

标签: javascript function countdown

您好,我正在用JS制作一个倒计时的网站(在接下来的5小时58分钟内订购,到周三交付)。 默认值为5pm,但某些产品范围需要在下午3点订购,包含这些产品的div为“ supplier_1010”。

带有此代码的那部分似乎找不到class provider_1010的div并更改了计时器。

https://jsfiddle.net/iangerdes/eqc6jsho/127/就是一个例子。

html

<div class="product">
<div class="timer"></div>  
</div>
<div class="product">
<div class="timer"></div>  
</div>
<div class="product">
<div class="timer"></div>  
</div>
<div class="product supplier_1010">
<div class="timer "></div>  
</div>
<div class="product supplier_1010">
<div class="timer"></div>  
</div>
<div class="product">
<div class="timer"></div>  
</div>

JS

该位不起作用。

if ($this.find('.supplier_1010').length > 0) {

      start.setHours(14, 45, 0); // 14.45
  }

JS

$('.product').each(function() { 
  var $this = $(this);
  var countdown = setInterval(function() { 


     var start = new Date();
     var now = new Date();
     var weekday = now.getDay();

   var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  var deliverydate = days[start.getDay() +1 ];

 if ($this.find('.supplier_1010').length > 0) {

      start.setHours(14, 45, 0); // 14.45
  }

  else { 
  start.setHours(17, 0, 0); // 5.00
  }





  if (now > start) { // too late, go to tomorrow
        start.setDate(start.getDate() + 1);
       deliverydate = days[now.getDay() +2 ];
      } 



    var Today = start.getDate();
    var Month = start.getMonth();


    var remain = ((start - now) / 1000);  
    var hh = Math.floor((remain / 60 / 60) % 60); 
    var mm = Math.floor((remain / 60) % 60);
    var ss = Math.floor(remain % 60);


  var timertext ='<i class="fa fa-truck"></i>' + 'Order in the next ' + '<strong>' + hh + ' hrs ' + mm + ' mins ' + ss + '</strong>'+ ' for delivery  by '+ deliverydate + '<a href="#" class="small" data-toggle="modal" data-target="#myDelivery">' + ' * See Exceptions'+ '</a>';



   jQuery(".timer").html(''+ timertext +'');



  }, 1000); 


  });

任何帮助都会很棒。它可能真的很简单,但无法弄清楚!!

欢呼伊恩

1 个答案:

答案 0 :(得分:0)

.find(selector)将“获取当前匹配元素集中每个元素的后代,并通过选择器,jQuery对象或元素过滤”。 .find docs

您的.each循环遍历每个.product div。对于每个div,它将查找类为supplier_1010后代,但是在您的HTML中,无论如何都不是.supplier_1010的后裔。

代替

  • .product

您可以尝试

  • if ($this.find('.supplier_1010').length > 0) {

您确实想找到一种情况,即您要在自身上循环的div具有$this.hasClass('supplier_1010')类(请参见.hasClass docs)。

编辑---

此外,

  • supplier_1010

最后应更新为:

  • jQuery(".timer").html(''+ timertext +''); =>这样,它将使用jQuery($this).find(".timer").html(''+ timertext +'');而不是所有计时器来更新每个个人计时器。

查看工作提琴:https://jsfiddle.net/h9zpw43v/1/