Jquery ui 添加多个jQuery UI滑块值

我使用的是具有固定最小值的jQueryUI滑块范围。我需要从一个滑块中获取值，并将其与另一个滑块值相加，然后在下面的文本框中显示结果

滑块设置为：

  $(function() {
    $( "#slider-range-food" ).slider({
      range: "min",
      value: 50,
      min: 0,
      max: 500,
      slide: function( event, ui1 ) {
        $( "#amountFood" ).val( ui1.value );
        total($( "#amountRent" ),ui1);
      }
    });
    $( "#slider-range-rent" ).slider({
      range: "min",
      value: 50,
      min: 0,
      max: 500,
      slide: function( event, ui2 ) {
        $( "#amountRent" ).val( ui2.value );        
        total($( "#amountFood" ),ui2);
      }
    });

    $( "#amountFood" ).val( $( "#slider-range-food" ).slider( "value" ) );
    $( "#amountRent" ).val( $( "#slider-range-rent" ).slider( "value" ) );

  });

将这些值相加的函数为：

  function total(ui1,ui2) {   
      $( "#amountTotal" ).val( ui1.val()  +  ui2.value );
  }  

html是：

<label for="amountFood">Expence For Food:</label>
<input type="text" name="amountFood" id="amountFood" class="text" value="50">
<input type="text" id="amountFood" readonly="readonly" style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-food"></div>

<label for="amountRent">Expence For Rent:</label>
<input type="text" name="amountRent" id="amountRent" class="text" value="50">
<input type="text" id="amountRent" readonly="readonly" style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-rent"></div>

<label for="amountTotal">Total Expence:</label>
<input type="text" name="amountTotal" id="amountTotal" class="text" value="50">
<input type="text" id="amountTotal" readonly="readonly" style="border:0; color:#f6931f; font-weight:bold;"> 

食品费用：
租金支出：
总费用：

我将您的代码复制到一个JSFIDLE，用于： （固定版本，见下文中）

运行它，会显示问题：

文本输入的$（el）.val（）将是一个文本值，因此

total

函数将这些值作为字符串相加，即

“50”+100=“50100”

您需要将

.val（）

从字符串转换为int，只需

*1

val：

function total(el, slider) {   
    $( "#amountTotal" ).val((el.val() * 1) + slider.value);
}

（我还将args重命名为您的用法，以明确为什么一个是

.val（）

，另一个是

.value

）

另一方面，我会将total（）func更改为接受int参数，这样它就不依赖于传递正确的类型（jquery元素+slider ui事件值），并且可以在需要时在事件外部使用（例如在页面加载时）