添加多个 jQuery UI 滑块值答案

【问题标题】：Adding Multiple jQuery UI Slider Values添加多个 jQuery UI 滑块值
【发布时间】：2015-07-08 09:54:59
【问题描述】：

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

滑块设置为：

  $(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;">

【问题讨论】：

标签： jquery-ui jquery-ui-slider

【解决方案1】：

为此，我将您的代码复制到了 jsfiddle：http://jsfiddle.net/kytkL835/ （固定版本，见下文，http://jsfiddle.net/kytkL835/1/）

运行它，显示问题：

来自文本输入的$(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() 函数更改为采用 int 参数，然后它不依赖于传递正确的类型（jquery 元素 + 滑块 ui 事件值），并且可以在需要时在事件之外使用（例如 on页面加载）。

【讨论】：