JQuery动态更改号码

网上商店。大车。产品在购物车：JQuery动态更改号码

name | price | count | pricecount 
Car | 10usd | 2 | 20usd

计数<input type='number' class='changecount'>，如果我改变它，我想通过价格采取在输入的数，然后乘以并改变pricecount的文本值。但是，我想效果做到这一点，像这样：

price = 10; count = 2; pricecount = 20; ->> change count to 3 so pricecount = 30; 
pricecount changes from 20 to 30 with effect showing 21,22,23..30 (like timer)

更改文本，但没有效果

$('.changecount').blur(function(){ 
    var $price = $(this).parent().siblings('.gprice').text(); 
    var $value = $(this).val(); 
    var $pricecount = $price * $value; 
    $(this).parent().siblings('.gpricecount').text($pricecount); 
});

我如何用jQuery做呢？

来源

2013-02-21 mozg

你为什么要用'$ price'来定义变量？这是一个PHP的东西。 – Flater 2013-02-21 16:31:54

@Flater在JavaScript中放置一个变量前面的$已经变得有点常见，表示该变量是一个jQuery对象。在这里使用op并不完全符合标准。 – Jack 2013-02-21 16:33:09

@Flater〜基本上不相关。虽然他的命名约定会让我感到厌烦（我用$来表示jQuery对象），但它是有效的语法。不要管它。：p – 2013-02-21 16:33:21

看到这个DEMO并告诉我它是否能解决你的问题。更改左边的价格，看看右边的输入效果

var timer = null; 
$("#price1").change(function(){ 
    if(!updating) updatePrice(); 
    }); 
}); 

    var updating = false; 
    function updatePrice() { 
     console.log("tick"); 
     var $price1 = $("#price1"); 
     var $price2 = $("#price2"); 
     var dif = +$price1.val() - +$price2.val(); 

     if(dif < 0) { 
     $price2.val(+$price2.val()-1); 
     }else if(dif > 0) { 
     $price2.val(+$price2.val()+1); 
     } 

     if(dif !== 0){ 
     updating = true; 
     setTimeout(updatePrice, 1000); 
     }else { 
     updating = false; 
     } 

    }

更新时间：泄漏固定

来源

2013-02-21 16:44:41 letiagoalves

这会泄漏，因为无法停止'setInterval'调用。 :( – 2013-02-21 16:46:47

@RichardNeilIlagan是的你是对的。看到更新的代码。 – letiagoalves 2013-02-21 17:09:45

你可以请它为多个项目？ – mozg 2013-02-21 18:16:39

Jquery.blur不是你的想法。它不会产生模糊效果，但会消除控件的焦点。淡入淡出可能是您的选择。

来源

2013-02-21 16:34:49

不，我不认为他对淡入淡出动画也很感兴趣。 – 2013-02-21 16:35:58

如果是的话，我使用blur来检查输入变化和火灾功能。不需要褪色。 changecount是一个输入类。 – mozg 2013-02-21 16:40:12

然后使用键盘。 – 2013-02-21 16:51:41

您可以创建一个周期性变化的数的函数：

function IncreaseTotalPrice(item, lowVal, highVal) { 
    //item is the DOM element that displays the price 

    while(lowVal < highVal) { 
     lowVal++; 
     item.text(lowVal); 
     sleep(100); //wait 0.1 sec before continuing the loop and changing the number again 
    } 
} 

function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
    } 
    } 
}

注：我喜欢用sleep()功能。 setTimeout()和setInterval()也一样。

来源

2013-02-21 16:41:41 Flater

您可以使用的一种方法是利用setInterval对文字执行常规排定的+1操作。

事情是这样的，从一个数到30，通过使其通过1个滴答每秒：

var interval = 1000,  // one second 
    max = 30, 
    textbox = $('#textbox'), 
    schedule = setInterval(function() { 

     var currentValue = textbox.val(); 

     // if we've already reached the max limit, 
     // break schedule 
     if (currentValue >= max) { 
      clearInterval(schedule); 
     } 

     // add 1 
     textbox.val(currentValue + 1);       

    }, interval);

代码的非常脏，但你应该能够得到我的意思是一个好主意。 setInterval的一个好处是它是非阻塞的，因此您的其他进程应该能够继续进行。

来源

2013-02-21 16:43:07