javascript - 我的 jquery 计数器正在混合元素 - 为什么？

Question

我有一个小的 html 页面，其中包含一个充满货币值的表格。

   TEXT     |   SUM    |   LIMIT  |
-----------------------------------
Text One    |   1.700 €|   1.500 €|
Text Two    |   1.945 €|   2.000 €|

html:

<tr><td>Text One</td><td class="text-right text-nowrap"><label class="euro counter" target="1200" limit="1500"></label></td><td class="text-right text-nowrap"><label class="euro">1.500</label></td></tr>
<tr><td>Text Two</td><td class="text-right text-nowrap"><label class="euro counter" target="2345" limit="2000"></label></td><td class="text-right text-nowrap"><label class="euro">2.000</label></td></tr>

然后我添加了一个 jQuery 计数器，它会计数到目标值。
这很好用。但我还想添加一个条件，如果该值大于限制，则该值变为红色。但计数器混合了两个值，并且在达到第一个 LIMIT 1.500 后 SUM 变红。 如何以通用方式分离所有值？ 这是js代码:

$(document).ready(function(){
  $('.counter').each(function() {
    var $this = $(this),
        target = $this.attr('target');
        limit = $this.attr('limit');
    $({ countNum: $this.text()}).animate({
      countNum: target
    },
    {
      duration: target*2,
      easing:'swing',
      step: function() {
        if (parseInt($this.text(), 10) > limit) {
          console.log($this.text());
          $this.addClass('f-red');
        }
        $this.text(Math.floor(this.countNum));
      }
    });
  });
});

编辑:在表格示例中——我只想以红色显示第一个 SUM 值，但我的实际计数器代码以红色显示两个 SUM 值，因为它们都高于最小限制 (1.500)。如何为每行设置单独的限制？

Answer 1

它不起作用，因为您不能使用变量并期望它在同步使用时具有不同的值。

确切地说，它足以改变这条线

if (parseInt($this.text(), 10) > limit) {

到

if (parseInt($this.text(), 10) > $this.attr('limit')) {

始终与实际限制进行比较

http://jsfiddle.net/umdnq38t/