在网站上写一个产品计算器

Question

有必要实施一个计算器来计算购买的总成本，并在通过+/-添加/移除货物单位时在线更改此费用。

我只能实现最初的价格扣除，这对任何变化都没有反应。 http://prntscr.com/h2pd8k

enter image description here

$(document).ready(function() {
    $('.minus').click(function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 0 : count;
        $input.val(count);
        $input.change();
        return false;
    });
    $('.plus').click(function () {
        var $input = $(this).parent().find('input');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        return false;          
    });
    var result = document.getElementById("allPrice");
    result.innerHTML= parseInt(document.getElementById("val").value*15*50);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-2 mfp-hide">
  <div class="popup__container">
    <h1 class="h1__catalog h1__catalog_popup2">Соберите свой набор</h1>
    <div class="block--top block--top_popup2"><img class="box-pic" src="img/box.png" alt=""/>
      <div class="select__wrap select__wrap_popup2"><span class="bold">Продукт</span>
        <select class="choice-candy">
          <option>Фруктово-ореховые сладости</option>
          <option>Бананы в шоколаде</option>
          <option>Клубника в шоколаде</option>
          <option>Черешня в шоколаде</option>
        </select><span class="bold margin-top-22">Размер</span>
        <select class="size">
          <option>15 штук</option>
          <option>15 штук</option>
          <option>15 штук</option>
        </select>
        <div class="block__candy-price">Стоимость одной конфеты:<br> <span class="bold">50 рублей</span></div>
      </div>
    </div>
    <div class="block--middle">
      <ul class="catalog__assortiment">
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Турин</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Мятный</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Семечки    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Пур Пур    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Мромор</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Банан</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Мускатный  </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>К кофе </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Трюфель</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Ореховый   </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Орандж </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Грецкий мак    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Золотой    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Миндаль    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Бронзовый      </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+      </span>
            </div>
          </div>
        </li>
      </ul>
      <div class="end_price">Итоговая стоимость: <span id="allPrice">0      </span><span>&#160 рублей                               </span></div>
    </div>
    <div class="block__order-form">
      <form class="form-order form-order-popup2">
        <label>Имя
          <input type="text"/>
        </label>
        <label>Телефон
          <input type="tel"/>
        </label>
        <input class="order-btn" type="submit" value="оформить заказ"/>
      </form>
    </div>
  </div>
</div>

Answer 1

首先，您不能拥有多个具有相同ID的元素。请改用class。

您触发了每个输入的更改事件，但您还需要侦听任何更改，然后重新计算总计。您的代码中完全没有该部分。

$(document).ready(function() {
        $('.minus').click(function () {
            var $input = $(this).parent().find('input');
            var count = parseInt($input.val()) - 1;
            count = count < 1 ? 0 : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $('.plus').click(function () {
            var $input = $(this).parent().find('input');
            $input.val(parseInt($input.val()) + 1);
            $input.change();
            return false;          
        });
        
        var result = document.getElementById("allPrice"),
            inputs = $('input.val');
        
        function calculateTotal() {
          var total = 0;
          inputs.each(function() {
              total += Number($(this).val());
          });
          result.innerHTML= parseInt(total*15); // TODO: get single value from select list instead of hard-coding 15
        }
        inputs.on('change', calculateTotal); // bind re-calculation to input change
        calculateTotal(); // calculate total on page load
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-2 mfp-hide">
      <div class="popup__container">
        <h1 class="h1__catalog h1__catalog_popup2">Соберите свой набор</h1>
        <div class="block--top block--top_popup2"><img class="box-pic" src="img/box.png" alt=""/>
          <div class="select__wrap select__wrap_popup2"><span class="bold">Продукт</span>
            <select class="choice-candy">
              <option>Фруктово-ореховые сладости</option>
              <option>Бананы в шоколаде</option>
              <option>Клубника в шоколаде</option>
              <option>Черешня в шоколаде</option>
            </select><span class="bold margin-top-22">Размер</span>
            <select class="size">
              <option>15 штук</option>
              <option>15 штук</option>
              <option>15 штук</option>
            </select>
            <div class="block__candy-price">Стоимость одной конфеты:<br> <span class="bold">50 рублей</span></div>
          </div>
        </div>
        <div class="block--middle">
          <ul class="catalog__assortiment">
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Турин</span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Мятный</span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Семечки    </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Пур Пур    </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Мромор</span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Банан</span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Мускатный  </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>К кофе </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Трюфель</span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Ореховый   </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Орандж </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Грецкий мак    </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Золотой    </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Миндаль    </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+</span>
                </div>
              </div>
            </li>
            <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
              <div class="choice_wrap"><span>Бронзовый      </span>
                <div class="number_candy"><span class="minus">-</span>
                  <input class="val" type="text" value="1" size="5"/><span class="plus">+      </span>
                </div>
              </div>
            </li>
          </ul>
          <div class="end_price">Итоговая стоимость: <span id="allPrice">0      </span><span>&#160 рублей                               </span></div>
        </div>
        <div class="block__order-form">
          <form class="form-order form-order-popup2">
            <label>Имя
              <input type="text"/>
            </label>
            <label>Телефон
              <input type="tel"/>
            </label>
            <input class="order-btn" type="submit" value="оформить заказ"/>
          </form>
        </div>
      </div>
    </div>