javascript - 对值由 jqueryui slider 控制的三个文本字段求和

Question

我有三个 jqueryui slider ，它们将数字(存储在数组中)输出到三个文本字段(具有 css 类 .add)。我需要对三个文本字段进行求和，并在 slider 更改时自动在文本字段(带有 id #amount)中显示总数。我已经尝试过:

<script>

var calcPrice = jQuery.noConflict();
calcPrice('.add').change(function () {
 var sum = 10;
      calcPrice('.add').each(function() {
        sum += Number(calcPrice(this).val());
    });
    calcPrice('#amount').val(sum);

});
</script>

但如果我手动输入数字，它只会对三个文本字段求和。我还需要在需要时灵活地更改默认起始金额 (var = sum 10;)，并将其显示在页面加载时的 #amount 字段中(它不会显示在页面加载 atm 上)。

Answer 1

对于 UI slider ，您需要使用 slider change事件和value method获取值

jQuery(function($) {
  $('.add').slider({
    min: 0,
    max: 10
  })
});


var calcPrice = jQuery.noConflict();
var basePrice = 10;
calcPrice('#amount').val(basePrice);
calcPrice('.add').on('slidechange', function() {
  var sum = basePrice;
  calcPrice('.add').each(function() {
    sum += Number(calcPrice(this).slider('value')) || 0;
  });
  calcPrice('#amount').val(sum);

});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="add" />
<br />
<div class="add" />
<br />
<div class="add" />
<br />
<input id="amount" />