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 回答