jQuery UI滑块 - 添加

我试图创建两个滑块，每个滑块都有自己的值，并使jQuery在输入字段中将这两个滑块添加到彼此中。jQuery UI滑块 - 添加

我是一个总的新手，当涉及到jQuery和我只设法通过以下对http://jqueryui.com/demos/slider/

$(function() { 
    $("#slider1").slider({ 
     value: 500, 
     min: 500, 
     max: 4000, 
     step: 500, 
     slide: function(event, ui) { 
      $("#amount1").val(ui.value + " kr."); 
     } 
    }); 
    $("#slider2").slider({ 
     value: 2700, 
     min: 2700, 
     max: 27000, 
     step: 2700, 
     slide: function(event, ui) { 
      $("#amount2").val(ui.value + " kr."); 
     } 
    }); 
    $('#amount').val(('#amount1') + ('#amount2')); 
});

HTML代码走到这一步：

<label for="amount1">Hours (500 kr. increments):</label> 
    <input type="text" id="amount1" style="border:0; color:#f6931f; font-weight:bold;" /> 

<div id="slider1"></div> 

    <label for="amount2">Camera (500 kr. increments):</label> 
    <input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;" /> 

<div id="slider2"></div> 

    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />

我想输入字段“amount”中显示的滑块1和滑块2的数量。

来源

2012-06-06 NizeGuy

我想弄清楚，这是** jQuery UI的**，不只是jQuery的。他们是不同的。 – qJake

添加updateTotal功能，并调用它在你的滑块的滑动事件处理程序：

$("#slider1").slider({ 
    value: 500, 
    min: 500, 
    max: 4000, 
    step: 500, 
    slide: function(event, ui) { 
     $("#amount1").val(ui.value + " kr."); 
     updateTotal(); 
    } 
}); 
$("#slider2").slider({ 
    value: 2700, 
    min: 2700, 
    max: 27000, 
    step: 2700, 
    slide: function(event, ui) { 
     $("#amount2").val(ui.value + " kr."); 
     updateTotal(); 
    } 
}); 

function updateTotal() { 
    var total = $("#slider1").slider("value") + $("#slider2").slider("value"); 
    $('#amount').val(total); 
}

来源

2012-06-06 20:04:03

jQuery UI滑块 - 添加

回答

相关问题