jQuery似乎只在一个实例

时间：2018-05-24 11:21:03

标签： jquery html

我需要在同一页面上为多个日期设置多个倒计时器。我想在class="cd"的所有元素上运行脚本。如果您检查下面的JSFiddle，您将看到只设置了一个innerHTML：

https://jsfiddle.net/3924cofL/1/

我设法做到这一点：

$(document).ready(function() {
  $(".cd").each(function(index, obj) {
    var countDownDate = new Date($(this).attr('value'));
    $id = this.id;

    // 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 an 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($id).innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";

      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById($id).innerHTML = "EXPIRED";
      }
    }, 1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

5 个答案:

答案 0 :(得分：3)

您的$id字段是全局字段，因此它仅包含each()完成后的最后一个ID。您需要将其更改为本地字段：

＆＃13;
＆＃13; 
$(document).ready(function(){
$(".cd").each(function (index, obj) {
    var countDownDate = new Date($(this).attr('value'));
    var $id = this.id; // <- should be local

    // 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 an 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($id).innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById($id).innerHTML = "EXPIRED";
        }
    }, 1000);
});
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>
＆＃13;
＆＃13;
＆＃13;

更新

正如其他答案中所指出的，您还可以将$id作为参数传递给setInterval()，这是一种更好的方式，但IE 9及更早版本不支持此语法。查看MDN了解详情。

答案 1 :(得分：3)

只是setInterval()函数是异步函数。

这就是为什么如果你想使用你需要传递它们的函数之外的变量。

以下是一个工作示例 

$(document).ready(function() {
  $(".cd").each(function(index, obj) {
    var countDownDate = new Date($(obj).attr('value'));
    $id = obj.id;

    var x = setInterval(function($id) {
      var now = new Date().getTime();
      var distance = countDownDate - now;

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

      document.getElementById($id).innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";

      if (distance < 0) {
        clearInterval(x);
        document.getElementById($id).innerHTML = "EXPIRED";
      }
    }, 1000, $id);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

但说实话，没有理由这样做。

为什么？因为您从元素中获取id只是为了通过id获取此元素。那毫无意义。这就像我会问嘿John，你的名字是什么？

这是一个没有不必要的id变量的解决方案 

$(document).ready(function() {
  $(".cd").each(function(index, obj) {
    var countDownDate = new Date(obj.getAttribute('value'));

    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;

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

      obj.innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";

      if (distance < 0) {
        clearInterval(x);
        obj.innerHTML = "EXPIRED";
      }
    }, 1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

答案 2 :(得分：1)

您需要更改代码，如下所示： $id = this.id;

使用： var $id = this.id;

瞧，它正在运作

答案 3 :(得分：0)

将您的追加更改为，您不需要ID 

$(obj).text(days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ");

演示：

$(document).ready(function(){
$(".cd").each(function (index, obj) {
    var countDownDate = new Date($(this).attr('value'));
    var $id = this.id; // <- should be local

    // 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 an 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"
         $(obj).text(days + "d " + hours + "h "
    			+ minutes + "m " + seconds + "s ");

        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById($id).innerHTML = "EXPIRED";
        }
    }, 1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

答案 4 :(得分：0)

尝试将$ id变量传递给setInterval函数，如下所示：

$(document).ready(function() {
  $(".cd").each(function(index, obj) {
    var countDownDate = new Date($(this).attr('value'));
    $id = this.id;

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

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

      // Find the distance between now an 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(elementId).innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";

      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById(elementId).innerHTML = "EXPIRED";
      }
    }, 1000, $id);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

相关问题
最新问题