Jquery для изменения, чтобы нацелить только один элемент формы

Question

У меня есть настройка скрипки, которая рассчитывает цену на основе выбранного элемента, но я хочу, чтобы она влияла только на форму. В настоящий момент, если я выберу любой из выпадающих меню, все значения изменятся.

http://jsfiddle.net/67jzyua5/

    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

Вы отображаете вновь рассчитанную цену для всех классов с именем item-price, поэтому она везде обновляет цену, используйте $(this).nextAll('span'), чтобы выбрать ближайший span, и используйте $(this).children(':selected').data('price'), чтобы получить data-price извыбранный параметр this относится к текущему элементу .calculate:

var basePrice = 12.99;

$(".calculate").change(function() {
    newPrice = basePrice;  
    newPrice += $(this).children(':selected').data('price');
    $(this).nextAll('span').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>

<form name="product_form" method="post" action="/product" class="product">
  <span>Pears</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">5.00</span>
</form>

<form name="product_form" method="post" action="/product" class="product">
  <span>grapes</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">16.99</span>
</form>