Question

我编写了一个简单的JQuery函数来计算从具有特定类名的div范围内的0到指定数字：

    <div class="number">50%</div>
    <div class="number">75%</div>

这是JQuery代码：

$(document).ready(function () {
$(".number").each( function() {
    var percent = $(this).text().replace("%","");
    console.log("test " + percent);

    function countToPercent(percent) {
        var interval = setInterval(counter,25);
        var n = 0;
        function counter() {
            if (n >= percent) {
                clearInterval(interval);
            }
            else {
                n += 1;
                // console.log(n);
                $(this).text(n + "%");
            }
        }
    }

    countToPercent(percent);
})
});

不幸的是它现在还没有工作 - 这可能是一个问题：

$(this).text(n + "%")

我使用控制台和评论的控制台对其进行了debbuged .log（n）工作 - 从0到指定的数字计数。因此选择正确的DOM元素时必须遇到问题。

禁止将setInterval（）与.each（）方法一起使用，或者使用＆＃34;这个＆＃34;关键词？或者代码中是否有一些错误？

Answer 1

您需要保存上下文以在setInterval

中使用它

＆＃13;

$(document).ready(function () {
$(".number").each( function() {
    var percent = $(this).text().replace("%","");
    console.log("test " + percent);
    var self = this; // fixing context;

    function countToPercent(percent) {
        var n = 0;
        var interval = setInterval(() => {
            if (n >= percent) {
                clearInterval(interval);
            }
            else {
                n += 1;
                // console.log(n);
                $(self).text(n + "%");
            }
        },25);
    }

    countToPercent(percent);
})
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="number">50%</div>
<div class="number">75%</div>

＆＃13;

Answer 2

您的问题是this关键字在区间范围的上下文中不存在。

通过提供注入变量并将其调用来将间隔内容包装到另一个范围：

＆＃13;

    $(function () {
    
      $(".number").each( function() {
        var $this = $(this);
        var percentage = parseFloat($this.text().replace("%",""));
        console.log("test " + percentage);
    
    
        (function(percentage, jqObject) {
          var n = 0;
          var interval = setInterval(function() {
            if(n >= percentage) return clearInterval(interval);
            n++;
            jqObject.text(n + '%');
          }, 25);
        })(percentage, $this);
        
      });
    
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="number">50%</div>
<div class="number">75%</div>

＆＃13;

或者你可能有外部功能做同样的事情：

＆＃13;

$(function () {
    
   function animatePercentageProgress(percentage, jqObject) {
      var n = 0;
      var interval = setInterval(function() {
        if(n >= percentage) return clearInterval(interval);
        n++;
        jqObject.text(n + '%');
      }, 25);
   }
    
    $(".number").each( function() {
      var $this = $(this);
      var percentage = parseFloat($this.text().replace("%",""));
      console.log("test " + percentage);  
      animatePercentageProgress(percentage, $this);
    });
        
});

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div class="number">50%</div>
    <div class="number">75%</div>

＆＃13;

或更多＆＃34;功能方式＆＃34;：

＆＃13;

$(function () {
        
   function animatePercentageProgress(idx, jqObjectPointer) {
      var jqObject = $(jqObjectPointer);
      var percentage = parseFloat(jqObject.text().replace("%",""));

      var n = 0;
      var interval = setInterval(function() {
        if(n >= percentage) return clearInterval(interval);
        n++;
        jqObject.text(n + '%');
      }, 25);
   }

    $(".number").each(animatePercentageProgress);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div class="number">50%</div>
    <div class="number">75%</div>

＆＃13;

JQuery：setInterval不使用each（）方法。错误＆＃34;这＆＃34;关键字或代码中的错误？

2 个答案: