Question

我选择了选项，它与数据属性的值相加。它总和＃mark1 +＃series1 +＃mark2 +＃series2

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="mark1" name="mark1">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series1" name="series1">
              <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="mark2" name="mark2">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series1" name="series2">
              <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="total1"> </div>
  <div id="total2"> </div>
  <div id="total"> </div>
</form>

我怎么能这样做，total1给出总和mark1和series1，total2给出总和mark2和series2。总给予总和mark1，series1，mark2，series2

Answer 1

这个答案对你有帮助吗？

我们可以从id属性中简单地提取id号，并显示在id为total的相应div中。如果您在实施过程中遇到问题，请告诉我们！

$('#mark1, #series1, #mark2, #series2').on('change', function() {
  var $selected = $('#mark1, #series1,#mark2, #series2').children(":selected");
  var sum = 0;
  var id = $(this).attr("id")[$(this).attr("id").length - 1];
  $selected.each(function() {
    sum += $(this).data('price') || 0;
  });

  $('#total'+id).html(sum === 0 ? '' : sum + '$');
  var total = 0;
  sum = 0;
  $("div[id*=total]:not(#total)").each(function(){
    $(this).each(function() {
      var val = $(this).text().replace("$", "") || 0
      sum += val * 1;
    });
  });
  $("div#total").html(sum === 0 ? '' : sum + '$');
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="mark1" name="mark1">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series1" name="series1">
              <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="mark2" name="mark2">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series2" name="series2">
              <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="total1"> </div>
  <div id="total2"> </div>
  <div id="total"> </div>
</form>

和数据属性3总价格如何？

1 个答案: