使用每个功能使用jQuery数据属性

Question

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

我正在使用每个功能来循环浏览它们添加的所有产品以总计价格。

对于常规值，我的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++;
});

Answer 2

$（this）.data（" minprice"）;指选择标签，而不是选项标签，在选择标签上没有数据 - 最高价格。

this.options将返回数组中的所有选项

或者您可以将以下内容用于选定的选项数据属性

$（this）.find（'option：selected'）。data（" minprice"）

或

$（"选项：selected"，this）.data（" minprice"）