0

インターネットショップ。カート。カート内の商品:

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

count は です<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 でどうすればできますか?

4

5 に答える 5

1

定期的に数値を変更する関数を作成できます。

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-21T16:41:41.783 に答える
1

これを行う 1 つの方法は、テコ入れsetIntervalして定期的にスケジュールされた +1 操作をテキストに対して実行することです。

1 秒ごとに 1 刻みにすることで、1 つの数値から 30 になるには、次のようにします。

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);

コードは非常に汚いですが、私の言いたいことがよくわかるはずです。良い点の 1 つsetIntervalは、非ブロッキングであるため、これが進行している間、他のプロセスを続行できるはずです。

于 2013-02-21T16:43:07.900 に答える
1

この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-21T16:44:41.407 に答える
0

次のような JQuery FlipCounter プラグインを試してください。

http://www.jqueryrain.com/?LCnNoMur

http://keith-wood.name/flightBoard.html

于 2013-02-21T16:49:09.533 に答える
0

Jquery.blur は、あなたが考えているものではありません。ぼかし効果はありませんが、コントロールのフォーカスを取り除きます。フェードイン・フェードアウトは、あなたのためのオプションかもしれません.

于 2013-02-21T16:34:49.697 に答える