javascript - jQuery 动画被覆盖

Question

我定义了一个 jQuery 函数“countTo”，它应该采用整数值并将 jQuery 对象的 html 动画设置为指定值。

jQuery.fn.extend({
    countTo:function(x){
        $this = $(this);
        var start = parseInt($this.html()) || 0;
        $({count:start}).animate({count:x},{
            step:function(val) {
                $this.html(Math.floor(val));
            }
        });
    }
});

如果我一次只在一个元素上使用它，它会起作用，但如果我尝试为 2 个元素设置动画，则第一个元素上的动画会在第二次调用后立即停止，例如:

$("#div1").countTo(100);
$("#div2").countTo(100);
//only div2 is changed, div1 remains unchanged

我在这里做错了什么？我该如何修复它？

Answer 1

您正在创建一个全局变量 $this，该变量在第二次调用中被覆盖，您需要使用 var 将其设为本地变量。

此外，如果您想在一次调用中支持多个变量，则需要迭代当前 jQuery 对象中的每个项目并执行类似的动画

jQuery.fn.extend({
  countTo: function(x) {
    return this.each(function() {
      var $this = $(this);
      var start = parseInt($this.html()) || 0;
      $({
        count: start
      }).animate({
        count: x
      }, {
        step: function(val) {
          $this.html(Math.floor(val));
        }
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>