每个函数使用 jquery 数据属性

Question

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

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

对于常规值，我的 JS 运行很棒，但我想添加产品可以出售的第二个价格（最低价格）。我已将数据添加为属性，并尝试使用相同的方法从属性中提取价格，但它一直返回 'undefined'!!!!

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");指的是 select 标签而不是选项标签，select 标签上没有数据最低价格。

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

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

$(this).find('option:selected').data("minPrice")

或

$("option:selected", 这个).data("minPrice")

每个函数使用 jquery 数据属性

Using jquery data attributes with each function

html

javascript

css

jquery

custom-data-attribute