Question

我有代码和选择选项：

function validate(){
  var $selected = $('#mark, #series').children(":selected");
  var sum = 0;

  $selected.each(function() {
    sum += $(this).data('price') || 0;
  });

  $('#total').html(sum === 0 ? '' : sum + '$');
}
validate();

$('#mark, #series').on('change', function() {
  validate();
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="mark" name="mark">
          <option value="">--</option>
          <option value="bmw" data-price="200">bmw</option>
          <option value="audi" data-price="400">audi</option>
        </select>

<select id="series" name="series">
          <option value="">--</option>
          <option value="series-1" data-price="2000"  >3 series</option>
          <option value="series-1" data-price="3000"  >5 series</option>
        </select>

<div id="total"> </div>
</form>

我想添加另一个表单并为其他所选选项执行求和。

   function validate(){

如何编辑这一行，并为form1和其他js代码执行其中一个js代码工作以及其他form2

Answer 1

这里的问题是你的validate()函数读取一组固定的select元素（#mark和#series）。如果要读取其他元素，则必须修改validate函数以添加新元素（不推荐！）或使其独立于select元素的特定id：使用css类获取元素你想要总结而不是他们的ids。

以下是一个例子：

＆＃13;

function validate() {
  var $selected = $('.sum-item').children(":selected");
  var sum = 0;

  $selected.each(function() {
    sum += $(this).data('price') || 0;
  });

  $('#total').html(sum === 0 ? '' : sum + '$');
}
validate();

$('.sum-item').on('change', function() {
  validate();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="mark" name="mark" class="sum-item">
          <option value="">--</option>
          <option value="bmw" data-price="200">bmw</option>
          <option value="audi" data-price="400">audi</option>
        </select>

  <select id="series" name="series" class="sum-item">
          <option value="">--</option>
          <option value="series-1" data-price="2000"  >3 series</option>
          <option value="series-1" data-price="3000"  >5 series</option>
        </select>

  <select id="other" name="series" class="sum-item">
          <option value="">--</option>
          <option value="type-a" data-price="10"  >Type A</option>
          <option value="type-b" data-price="20"  >Type B</option>
          <option value="type-c" data-price="30"  >Type C</option>
        </select>

  <div id="total"> </div>
</form>

＆＃13;

如何用JS总结两种形式？

1 个答案: