jQuery 非常简单的第二个倒计时

Question

我正在尝试为秒创建一个非常简单的倒计时。消息弹出，例如“您将在 'X' 秒后被重定向。” 'X' 取决于我们的最终用户输入的内容。不确定为什么我的代码不起作用。

if($('.ty').find('.form-ty-redirect').length !== 0){
  // alert("redirect here");

  $('.form-ty-redirect').each(function(){

    setInterval(function() {
    var count = $(this).find('#counter').html();
    $(this).find('#counter').html(count - 1);
  }, 1000);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ty">
   <h4>Example# 1</h4>

   <p class="form-ty-redirect">You will be redirected in  <span id="counter">10</span> seconds.</p>
 </div>
 
 <div class="ty">
   <h4>Example# 2</h4>
   <p class="form-ty-redirect">You will be redirected in  <span id="counter">20</span> seconds.</p>
 </div>

Answer 1

this 可能很难处理，因为它完全取决于范围。在您的间隔回调函数中，它不再引用与其声明的函数相同的范围。

与其在间隔回调中使用 $(this)，不如将其绑定为匿名函数的参数，就像这样。

if ($('.ty').find('.form-ty-redirect').length !== 0) {
  //alert("redirect here");

  $('.form-ty-redirect').each(function() {

    (function(elm){
      setInterval(function() {
        var count = elm.find('#counter').html();
        elm.find('#counter').html(count - 1);
      }, 1000);
    })($(this));

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ty">
  <h4>Example# 1</h4>

  <p class="form-ty-redirect">You will be redirected in <span id="counter">10</span> seconds.</p>

</div>

<div class="ty">
  <h4>Example# 2</h4>
  <p class="form-ty-redirect">You will be redirected in <span id="counter">20</span> seconds.</p>

</div>

jQuery 非常简单的第二个倒计时

Very simple second countdown with jQuery

jquery

countdown