0

スライダーの値に基づいてサービスの価格を計算するために使用している次のコードがあります。

PriceValリアルタイムで更新されないことを除けば、うまく機能します。ユーザーがマウス クリックをスライダーから離したときにのみ更新されます。

スライダーがスライドするときにリアルタイムで更新する方法を知っている人はいますか?

このページはhttp://www.voxlogic.net/pricing/で見ることができます。

$(function() {
//document.getElementById("f1").reset();
$(":range").rangeinput({ progress: true, max: 100, value:1 });  
$(":range").change(function(){
    var sliderVal = this.value;
    calculatePrice(sliderVal);      
});
$(":range").keyup(function(){
    var sliderVal = this.value;
    if (sliderVal==""){
        $("#priceVal").html('');
}
else
        {
            //check if value is from 1..25 range and correct otherwise
            if (isNaN(sliderVal)){sliderVal=1;}
            if (sliderVal<1){sliderVal=1;}
            if (sliderVal>25){sliderVal=25;}
            this.value = sliderVal;
            calculatePrice(sliderVal);
        }
    });
    
    $(":range").keydown(function(){
        var sliderVal = this.value; 
        calculatePrice(sliderVal);      
});
});

function calculatePrice(sliderVal){
    if (isNaN(sliderVal)){sliderVal=1;}
    if (sliderVal<1){sliderVal=1;}
    if (sliderVal>25){sliderVal=25;}
    var priceVal;
    if (sliderVal<=9){
        priceVal = sliderVal*6;
    }
    else if ((sliderVal>9)&&(sliderVal<=19)){
        priceVal = 9 * 6 + (sliderVal-9) * 4.5;         
    }
    else if (sliderVal>19){
        priceVal = 9 * 6 + 10 * 4.5 + (sliderVal-19) * 3.6;
    }
    $("#priceVal").html('&pound;'+priceVal.toFixed(2));
}
});
4

2 に答える 2

2

onSlideイベントをバインドする必要があります

onSlide

滑りが発生した場合。false を返すか、イベント オブジェクトに対して preventDefault() を呼び出すことで、アクションをキャンセルできます。このイベント リスナーを割り当てると、パフォーマンスが高くなり、スライド エクスペリエンスの滑らかさに影響する可能性があることに注意してください。

changeイベントの代わりに

change

範囲値を変更した後。下にあるスライダーをクリックして範囲をスライドすると、トリガーされるイベントはこれだけになります。名前は jQuery の change メソッドと同じであり、イベントをその関数に直接バインドできることに注意してください。その他のイベントについては、bind メソッドを使用する必要があります。これにより、上記の例に示すように、より流暢な構文になります。

通話でこれを行うことができます$.rangeinput：

$(":range").rangeinput({
  progress: true,
  max: 100,
  value: 1,
  onSlide: function(evt, val) {
    calculatePrice(val);
  }
});

または後で使用しbindます。

$(":range").bind('onSlide', function(evt, val){
  calculatePrice(val);
});
于 2012-09-02T13:29:39.433 に答える
0

スライド イベントに接続する必要があります。

$(".SliderDiv").slider({ min: 0, max: 16, step: .25, slide: SliderSlide, animate: true });

// ---- SliderSlide ---------------------------
//
// user is dragging or clicking a slider

function SliderSlide(event, ui)
{
    var Value = ui.value
    var $Sender = $(ui.handle);
    var $Row = $Sender.parentsUntil("table", "tr");
    ...
    // Call your function here
于 2012-09-02T13:11:52.257 に答える