Question

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

我正在使用每个函数来遍历他们添加的所有产品以总结价格。

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

$（本）。数据（ “minPrice”）;是指select标签而不是options标签，select标签上没有data-min-price。

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

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

$（本）.find（ '选项：选择了'）。数据（ “minPrice”）

或

$（“选项：已选中”，此）.data（“minPrice”）

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

2 个答案: