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对象中的每个项目并执行动画，如

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery动画被覆盖

1 个答案: