Question

我有三个jqueryui滑块，它们将数字（存储在数组中）输出到三个文本字段（具有css类.add）。我需要将三个文本字段进行求和，并在更改滑块时自动显示文本字段（带有#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 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" />

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

1 个答案: