jQuery UI滑塊 - 添加

Question

我試圖創建兩個滑塊，每個滑塊都有自己的值，並使jQuery在輸入字段中將這兩個滑塊添加到彼此中。

我是一個總的新手，當涉及到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的數量。

Answer 1

添加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); 
}​