对三个文本字段求和，其值由 jqueryui 滑块控制

Question

我有三个jqueryui滑块，它们将数字（存储在数组中）输出到三个文本字段（具有css类.add）。每当滑块更改时，我需要对三个文本字段求和，并将总数自动显示在文本字段中（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 = 总和 10;）在需要时，并在页面加载时将其显示在 #amount 字段中（它不会显示在页面加载ATM上）。

Answer 1

对于 UI 滑块，需要使用滑块更改事件和值方法来获取值

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" />