对每个函数使用 jquery 数据属性答案

【问题标题】：Using jquery data attributes with each function对每个函数使用 jquery 数据属性
【发布时间】：2017-03-06 20:12:46
【问题描述】：

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

我正在使用 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>

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

对于选项的常规值，代码完美地工作，我只是不能让它重复数据属性！

谢谢

【问题讨论】：

systemEachMin = $(this).attr("data-min-price");。你的代码不完整。 $(".systemNumber") html 丢失
或$(this).data("min-price")
我已经尝试了这两种方法，它只是不断返回“未定义”。我已经研究了函数的骆驼案例问题，但无论我做什么，它都会不断返回“未定义”
$('.system1').each 循环每个<select> 元素，而不是每个<option> 元素。您的选择没有 data 属性。要获得选定的选项，您可以使用 $(this).find(':selected')
出色的@Partick Evans，谢谢！ systemEachMin = $(this).find(':selected').data("min-price");为什么我在定位值时不必使用 selected 属性？但我在定位属性时会这样做吗？

标签： javascript jquery html css custom-data-attribute

【解决方案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++;
});

【讨论】：

而input.systemNumber只有一个，所以$(".systemNumber").eq(i).val()也是错误的（除非这里的HTML不完整）

【解决方案2】：

$(this).data("minPrice");指的是select标签而不是options标签，select标签上没有data-min-price。

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

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

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

或

$("option:selected", this).data("minPrice")

【讨论】：