Question

我有各自的功能，里面我有步进功能的动画。当我尝试调用$（this）并调用当前每个的选择器时 - 它不起作用并给我一些对象（可能是动画步骤函数）

如何到达每个元素选择器的$（this）???

我的代码：

$(".animateNumber").each(function(){
    var selector = $(this);
    jQuery({ counter: 0 }).animate({
        counter: $(this).text()
    }, {
        step: function() {
            // problem: the $(this) not working - if change to `selector` working
            $(this).text(Math.ceil(this.counter));
        }
    });
});

Answer 1

    $(".animateNumber").each(function(i,v){
        jQuery({ counter: 0 }).animate({
            counter: $(v).text()
        }, {
            step: function() {
                $(v).text(Math.ceil(this.counter));
            }
        });
     });

Answer 2

它不起作用并给我一些对象

this处的{p> step将成为{ counter: 0 }来电时传递的对象jQuery()。

您可以使用selector或$(this)作为.animate()的选择器;使用now函数的step参数在counter调用时设置.text()的值。请注意，fx函数的step对象也引用了this属性的elem元素。您可以使用在.animate()之外定义的对象传递第一个参数来设置，使用object处的值重置动画属性。

在+之前添加$(this).text()运算符，将counter值设置为Number。

不确定预期效果是什么，但this step应该是.each()次迭代的当前元素。

＆＃13;

var props = {from:0, to:100};
$(".animateNumber").each(function() {
    $(this).animate({
        counter: props.to
    }, {
        step: function(now, fx) {
          console.log(this, fx.elem)
            $(this).text(Math.ceil(now));
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="animateNumber">0</div>
<div class="animateNumber">0</div>
<div class="animateNumber">0</div>

＆＃13;

在问题中使用与js类似的模式，您可以将selector设置为传递给elem的对象的属性.animate()，引用this.elem，{ {1}} this.counter函数。

＆＃13;

step

＆＃13;

$(".animateNumber").each(function() {
  var selector = $(this);
  jQuery({
    elem: selector,
    counter: 0
  }).animate({
    counter: +$(this).text()
  }, {
    step: function () {
      // problem: the $(this) not working - if change to `selector` working
      this.elem.text(Math.ceil(this.counter));
      console.log(this)
    }
  });
});

＆＃13;

jQuery - 在step-animate函数中理解`this`

2 个答案: