Jquery 单独的多选选项在更改时更新价格答案

【问题标题】：Jquery separate Multiple Select Options update price on changeJquery 单独的多选选项在更改时更新价格
【发布时间】：2018-03-22 07:33:57
【问题描述】：

我有几个具有原始价格的单个产品，每个产品都有一个选择下拉列表和相关价格，原始价格根据选择的选项而变化，这是通过 JQuery 完成的。

所以产品 1 = 3.99，以及可选插件（选择中的选项）小 = 1.50，中 = 3.50 等等。

<p><span data-name="product_name">Addon Product</span></p>
<p data-name="product_desc">Addon product descriptions</p>
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
<span class="price pull-left" itemprop="price" id="price">&pound;5.99</span>
<hr/>

<p><span data-name="product_name">2nd Product</span></p>
<p data-name="product_desc">2nd Addon product description</p>
 <label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="20" value="Medium">Medium</option>
<option data-price="30" value="Large">Large</option>
</select>
<span class="price pull-left" itemprop="price" id="price">&pound;3.99</span>
<hr/>

还会有产品3、4等。

输入字段名称、价格、id、类是从数据库中动态填充的，因此它们对于不同的项目是相同的。

如果存在一个产品，那很好，但是对于多个产品及其选项，第一个 ID 的价格只会发生变化。例如，如果我更改产品 2 的选择，那么产品 1 的价格只会发生变化。我怎样才能让它坚持自己的产品并仅更改该产品的价格？

这是我的代码和jsfiddle

var basePrice = +($('#price').html()).replace(/[^0-9\.]+/g,"");
    $(".readers").change(function() {
      newPrice = basePrice;
      $(".readers option:selected").each(function() {
        newPrice += +$(this).attr('data-price')
      });
      $("#price").html("&pound;" + newPrice.toFixed(2));
      $("#new-price").val(newPrice.toFixed(2));
    });

【问题讨论】：

您只能使用一次 ID。为每个元素提供唯一的 ID。
好的，有没有办法使用 jQuery 动态引用 id 而无需隐式指定它，因为它们将从数据库中填充，并且会有 n 个数字？
问题是，元素的ID，每个元素的ID应该是唯一的。在您的情况下， span 元素 id 在这两种情况下都是 price 。确保 <Select> 元素具有唯一 ID，并且 <span> 元素具有唯一 ID。
有几种方法可以做到这一点。或者更多地构建你的 HTML（将每个产品块放在一个 div 或其他东西中），然后使用 .parent、.children 等遍历 DOM，或者使用 data- 属性，或者使用连接，其中可能是select 元素类似于产品 ID，然后价格跨度的 id 类似于“price-1234”，然后将“price-”与产品 ID 连接。给猫剥皮的方法很多。

标签： javascript php jquery

【解决方案1】：

我解决了这个问题并修复了一些问题。你的 HTML 是

缺少一些结束标签
将第二个产品嵌入到第一个产品组中

通过将它们分成不同的组，然后使用 jquery 代码查找父组，然后在该组中按 CLASS 搜索子组，能够获得您正在寻找的功能。

$(".readers").change(function() {
    // For each reader, need to go up to the form-groups parent to search for the price
  var productParent = $(this).parent().parent();
  // Need to get the base price from an attribute, otherwise it will change each time you make a selection
  var newPrice = parseFloat(productParent.find('.price').attr('data-price'));
  productParent.find(".readers option:selected").each(function() {
    newPrice += +$(this).attr('data-price')
  });
  productParent.find(".price").html("&pound;" + newPrice.toFixed(2));
});

https://jsfiddle.net/4rg0ou5e/

【讨论】：