gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:35:45 27 4
gpt4 key购买 nike

我有一个小的 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)。如何为每行设置单独的限制?

最佳答案

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

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

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

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

始终与实际限制进行比较

http://jsfiddle.net/umdnq38t/

关于javascript - 我的 jquery 计数器正在混合元素 - 为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54245688/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com