javascript - 在每个函数中使用 jquery 数据属性

Question

我正在构建一个报价生成器，并且有一个产品字段，用户可以在其中选择产品、选择数量，然后根据需要添加另一个。

我正在使用 each 函数循环遍历他们添加的所有产品以计算价格总和。

对于常规值，我的 JS 运行良好，但我想添加产品可以出售的第二个价格(最低价格)。我已将数据添加为属性，并尝试使用相同的方法从属性中提取价格，但它一直返回“未定义”!!!!

HTML

<select class="form-control onChangePrice system1" name="SystemModel">
  <option value="">Select...</option>
  <option value="3300" data-min-price="3000">System 1</option>
  <option value="4500" data-min-price="4000">System 2</option>
  <option value="6000" data-min-price="5500">System 3</option>
  <option value="6000" data-min-price="5500">System 4</option>
</select>
<div class="col-lg-3 col-md-3 col-sm-3">
  <input class="form-control onChangePrice systemNumber" type="number" name="SystemModelAmount" value="1">
</div>

JS

 var systemTotal = 0;
 var systemMin = 0;
 var i = 0;
 $('.system1').each(function(){
  if (this.value != "") {
    systemEachMin = $(this).data("minPrice");
    console.log(systemEachMin);
    systemEachTotal = this.value * parseInt($(".systemNumber").eq(i).val());
    systemTotal += parseFloat(systemEachTotal);
    systemMin += parseFloat(systemEachMin);
  };
  i++;
});

该代码对于选项的常规值完美运行，我只是无法让它为数据属性重复!

谢谢

Answer 1

你在这里做的一些事情有点不对:

$('.system1').each(function(){

应该是:

$('.system1 option').each(function(){

和

systemEachMin = $(this).data("minPrice");

应该是:

systemEachMin = $(this).data("min-price");

完整内容:

var systemTotal = 0;
 var systemMin = 0;
 var i = 0;
 $('.system1 option').each(function(){
  if (this.value != "") {
    systemEachMin = $(this).data("min-price");
    console.log(systemEachMin);
    systemEachTotal = this.value * parseInt($(".systemNumber").eq(i).val());
    systemTotal += parseFloat(systemEachTotal);
    systemMin += parseFloat(systemEachMin);
  };
  i++;
});