Question

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

所以产品1 = 3.99，可选插件（来自select的选项）small = 1.50，Medium = 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));
    });

Answer 1

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

缺少多个结束标记
将第二个产品嵌入第一个产品组

通过使它们成为单独的组，然后使用jquery代码查找父组，然后通过该组中的CLASS搜索子项，能够获得您正在寻找的功能。

Format                                   : AVI
Format/Info                              : Audio Video Interleave
Format profile                           : OpenDML
File size                                : 1.13 GiB
Duration                                 : 2 h 12 min
Overall bit rate                         : 1 227 kb/s
Writing application                      : Lavf57.26.100

Video
ID                                       : 0
Format                                   : MPEG-4 Visual
Format profile                           : Advanced Simple@L5
Format settings                          : BVOP1
Format settings, BVOP                    : 1
Format settings, QPel                    : No
Format settings, GMC                     : No warppoints
Format settings, Matrix                  : Default (H.263)
Muxing mode                              : Packed bitstream
Codec ID                                 : XVID
Codec ID/Hint                            : XviD
Duration                                 : 2 h 12 min
Bit rate                                 : 1 084 kb/s
Width                                    : 624 pixels
Height                                   : 368 pixels
Display aspect ratio                     : 5:3
Frame rate                               : 25.000 FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Compression mode                         : Lossy
Bits/(Pixel*Frame)                       : 0.189
Stream size                              : 1.00 GiB (88%)
Writing library                          : XviD 1.2.1 (UTC 2008-12-04)

Audio
ID                                       : 1
Format                                   : MPEG Audio
Format version                           : Version 1
Format profile                           : Layer 3
Codec ID                                 : 55
Codec ID/Hint                            : MP3
Duration                                 : 2 h 12 min
Bit rate mode                            : Constant
Bit rate                                 : 128 kb/s
Channel(s)                               : 2 channels
Sampling rate                            : 48.0 kHz
Compression mode                         : Lossy
Stream size                              : 120 MiB (10%)
Alignment                                : Aligned on interleaves
Interleave, duration                     : 24  ms (0.60 video frame)

https://jsfiddle.net/4rg0ou5e/

Jquery在更改时单独选择多个选项更新价格

1 个答案: