javascript - 如何求和数据属性总价？

Question

我有选择框，它们有数据属性(数据价格)。我想将所选选项“data-price”加总为“total”。但我有一个问题。如果我只选择 value="bmw"或者我没有选择任何东西，它会给我 NaN$。

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

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

  $('#total').html(sum + '$');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 1

此代码将解决您的问题:

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

  $selected.each(function() {
    var price = $(this).data('price');

    if(price){
        sum += $(this).data('price');
    }
  });

  $('#total').html(sum + '$');
});

如果将 price 变量记录到 forEach 循环中，您可以看到它返回一个 integer，然后返回一个 undefined。这应该是固定的! :)