Question

我有一个小提琴设置，它根据选择的项目计算价格，但是我只希望它的形状受到影响。目前，如果我选择任何下拉菜单，则所有值都会更改。

    var basePrice = 12.99;
    $(".calculate").change(function() {
        newPrice = basePrice;
        $(".calculate option:selected").each(function() {
            newPrice += $(this).data('price')
        });
        $(".item-price").html(newPrice.toFixed(2));
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="product_form" method="post" action="/product" class="product">
      <span>Apples</span>
      <select class="form-control calculate" id="product" name="product">
          <option data-price="1" value="1">1</option>
          <option data-price="2" value="2">2</option>
          <option data-price="3" value="3">3</option>
          <option data-price="4" value="4">4</option>
      </select>
      <br />                    
      <span class="item-price">12.99</span>
    </form>

我实际上将其设置为循环形式的产品，在小提琴中，我有一个有关如何输出HTML的示例，但实际上我将其设置与此类似：

{% for product in forms %}
    {% include 'search/product.twig' with {'product': product} %}
{% endfor %}

Answer 1

您需要缩小选择器的范围。目前，它们是全局选择器。

var basePrice = 12.99;

$(".calculate").change(function(e) {
    //get the form the change happened in
    var $form = $(e.target).closest('form');

    newPrice = basePrice;

    //process only the calculate in this form
    $form.find(".calculate option:selected").each(function() {
        newPrice += $(this).data('price');
    });

    //change only the item price in this form
    $form.find(".item-price").html(newPrice.toFixed(2));
});

Answer 2

您正在向所有名为recyclerView的类显示新计算的价格，这就是为什么它在各处更新价格的原因，请使用item-price选择最接近的$(this).nextAll('span')并使用{{1} }以获取所选选项的span，$(this).children(':selected').data('price')引用当前的data-price元素：

this

.calculate

更改时仅针对一个表单项的jQuery

2 个答案: