Question

我试图调整我在另一个stackoverflow问题上找到的脚本。基本上我希望能够为该div的每个实例获取数据属性，该属性是计数和从零开始计数到该数字。

基本上我试图遍历每个div元素并创建data-attribute的变量，然后对相应元素执行计数动画。

我的HTML：

  <div class="count_item" data-count="5000">0</div>

  <div class="count_item" data-count="444">0</div>

  <div class="count_item" data-count="6666">0</div>

我的jQuery：

$(".count_item").each(function(i) {

  var count_val = $(this).data('count');

  $("body").append(count_val);
  console.log(count_val);

$({countNum: $(i).text()}).animate({countNum: count_val}, {
  duration: 8000,
  easing:'linear',
  step: function() {
    $(i).text(Math.floor(this.countNum));
  },
  complete: function() {
    $(i).text(this.countNum);
    alert('finished');
  }
});
});

我无法锻炼为什么如果你看到控制台它会获得两个值，然后在第三个之前出现错误。帮助赞赏。

工作示例：http://jsbin.com/yenunijemo/2/

Answer 1

问题是i不是你所期望的（它是选择数组中每个.count_item的索引，而不是自身中的元素）。解决这个问题的一个简单方法是定义一个变量（例如：$this），它将包含您正在使用的元素，并用该变量替换i。

如果您尝试以下代码，它将正常工作：

$(".count_item").each(function(i) {

    var count_val = $(this).data('count');
    var $this = $(this);

    $("body").append(count_val);
    console.log(count_val);

    $({countNum: $this.text()}).animate({countNum: count_val}, {
        duration: 8000,
        easing:'linear',
        step: function() {
            $this.text(Math.floor(this.countNum));
        },
        complete: function() {
            $this.text(this.countNum);
            alert('finished');
        }
    });
});

你可以看到它正在使用这个JSFiddle：http://jsfiddle.net/nqn09dd0/1/

jQuery从每个获取数据attr，然后执行count up动画

1 个答案: