Question

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

滑块设置为：

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

Answer 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事件值），并且可以在事件之外使用需要（例如在页面加载时）。

添加多个jQuery UI滑块值

1 个答案: