Question

我有选择框，他们有数据属性（数据价格）。我想总结选择的选项＆＃34;数据价格＆＃34; as＆＃34;总计＆＃34; 。但我有一个问题。如果我只选择值=＆＃34; bmw＆＃34;或者我没有选择它给我NaN$的任何内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您必须解析被视为字符串的数据

 $selected.each(function() {
     var data = $(this).data('price');
     if(data != undefined){
           sum += parseFloat(data);
     }
 });

Answer 2

当您只选择一个选项时，另一个选项的选项没有“数据价格”属性：

<option value="">--</option>   <!-- data-price === "undefined" -->

您可以为最初选择的选项设置默认值“0”：

<option value="" data-price="0">--</option>

示例：

$('#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="" data-price="0">--</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="" data-price="0">--</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 3

此代码将解决您的问题：

    $('#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。那应该是固定的！：）

Answer 4

当您更改一个下拉列表时，假设Make，$selected将包含两个元素：

<option value="bmw" data-price="200">bmw</option>和<option value="">--</option>

当您现在计算总和时，您将添加两个值200并将空字符串添加为字符串。您应该尝试使用parseInt("string", 10)将所有值解析为整数（请注意指定要使用的基数的10参数，这是明确的好习惯，请参见此处的parseInt documentation）。

此外，正如其他答案所述，您应该始终尝试默认为整数值（在空字符串的情况下）。所以你的代码现在可以是这样的：

$('#mark, #series').on('change', function() {
  var $selected = $('#mark, #series').children(":selected");
  var sum = 0;

  $selected.each(function() {
    var optionPrice = parseInt($(this).data('price'), 10) || 0;
    sum += optionPrice;
  });
  
  $('#total').html((sum) ? (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 5

如果返回值为0，请使用后备值undefined。

使用该行。

sum += $(this).data('price') || 0;

注意：您还需要在开始时运行此验证功能，以确保在change()事件之前的结尾计算结果。

＆＃13;

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();
});

＆＃13;

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

＆＃13;

如何总和数据属性总价？

5 个答案: