0

Пишу добавление количества в корзину и столкнулся с проблемой, что активны только plus-btn1 и minus-btn1, то есть только второй в корзине товар. введите сюда описание изображения Помогите, пожалуйста

function addQt() {
  $(document).ready(function() {
    $('#plus-btn').click(function() {
      e.preventDefault();
      var $this = $(this);
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      if (value < 5) {
        value = value + 1;
      } else {
        value = 5;
      }
      input.val(value);
      if (value == 0) {
        $('.item').remove();
      }

      $("#total-price").html(value * prv + value1 * prv1);
    });

    $('#minus-btn').click(function(e) {
      e.preventDefault();
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      var $this = $(this);
      if (value > 1) {
        value = value - 1;
      } else {
        value = 0;
      }
      input.val(value);
      if (value == 0) {
        $('.item').remove();
      }

      $("#total-price").html(value * prv + value1 * prv1);
    });


    $('#plus-btn1').click(function(e) {
      e.preventDefault();
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      var $this = $(this);
      if (value1 < 5) {
        value1 = value1 + 1;
      } else {
        value1 = 5;
      }
      input1.val(value1);
      if (value1 == 0) {
        $('.item').remove();
      }

      $("#total-price").html(value * prv + value1 * prv1);
    });

    $('#minus-btn1').click(function(e) {
      e.preventDefault();
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      var $this = $(this);
      if (value1 > 1) {
        value1 = value1 - 1;
      } else {
        value1 = 0;
      }
      input1.val(value1);
      if (value1 == 0) {
        $('.item').remove();
      }
      $("#total-price").html(value * prv + value1 * prv1);
    });
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload="addQt()">
  <div class="shopping-cart-container">
    <div class="shopping-cart">
      <!-- Title -->
      <div class="title">
        Корзина
      </div>
      <div class="item">
        <div th:each="el : ${session.cart}">
          <div class="buttons">
            <form th:action="'/cart/remove'" method="post">
              <button class="delete-btn" type="submit"></button>
            </form>
          </div>
          <div class="image">
            <img th:src="${session.cart['img']}" alt="" />
          </div>
          <div class="description">
            <span th:text="${session.cart['name']}"></span>
            <span th:text="${session.cart['item_size'] != null} ? ${session.cart['item_size']}"></span>
            <span th:text="${session.cart['color']}"></span>
          </div>
          <div class="quantity">
            <button id="plus-btn" type="button" name="button">
              <img src="plus.svg" alt="" />
             </button>
            <button id="minus-btn" type="button" name="button">
              <img src="minus.svg" alt="" />
            </button>
            <input id="cart_quantity" th:value="${session.cart['quantity']}" />
            <input type="number" id="price" th:value="${session.cart['price']}" readonly/>
          </div>
        </div>
        <div class="item">
          <div th:each="el : ${session.cart1}">
            <div class="buttons">
              <form th:action="'/cart1/remove'" method="post">
                <button class="delete-btn" type="submit"></button>
              </form>
            </div>
            <div class="image">
              <img th:src="${session.cart1['img']}" alt="" />
            </div>
            <div class="description">
              <span th:text="${session.cart1['name']}"></span>
              <span th:text="${session.cart1['item_size'] != null} ? ${session.cart1['item_size']}"></span>
              <span th:text="${session.cart1['color']}"></span>
            </div>
            <div class="quantity">
              <button id="plus-btn1" type="button" name="button">
                <img src="plus.svg" alt="" />
              </button>
              <button id="minus-btn1" type="button" name="button">
                <img src="minus.svg" alt="" />
              </button>
              <input id="cart_quantity1" th:value="${session.cart1['quantity']}" />
              <input type="number" id="price1" th:value="${session.cart1['price']}" readonly/>
            </div>
          </div>
          <div>Итого: <span id="total-price"></span>pуб.</div>

1 ответ 1

1

Вы не передали сам event.

У вас:

$('#plus-btn').click(function() {

Надо:

$('#plus-btn').click(function(e) {

function addQt() {
  $(document).ready(function() {
    $('#plus-btn').click(function(e) {
      e.preventDefault();
      var $this = $(this);
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      if (value < 5) {
        value = value + 1;
      } else {
        value = 5;
      }
      input.val(value);
      if (value == 0) {
        $('.item').remove();
      }

      $("#total-price").html(value * prv + value1 * prv1);
    });

    $('#minus-btn').click(function(e) {
      e.preventDefault();
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      var $this = $(this);
      if (value > 1) {
        value = value - 1;
      } else {
        value = 0;
      }
      input.val(value);
      if (value == 0) {
        $('.item').remove();
      }

      $("#total-price").html(value * prv + value1 * prv1);
    });


    $('#plus-btn1').click(function(e) {
      e.preventDefault();
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      var $this = $(this);
      if (value1 < 5) {
        value1 = value1 + 1;
      } else {
        value1 = 5;
      }
      input1.val(value1);
      if (value1 == 0) {
        $('.item').remove();
      }

      $("#total-price").html(value * prv + value1 * prv1);
    });

    $('#minus-btn1').click(function(e) {
      e.preventDefault();
      var input = $('#cart_quantity');
      var value = parseInt(input.val());

      var pr = $('#price');
      var prv = parseInt(pr.val());

      var input1 = $('#cart_quantity1');
      var value1 = parseInt(input1.val());

      var pr1 = $('#price1');
      var prv1 = parseInt(pr1.val());
      var $this = $(this);
      if (value1 > 1) {
        value1 = value1 - 1;
      } else {
        value1 = 0;
      }
      input1.val(value1);
      if (value1 == 0) {
        $('.item').remove();
      }
      $("#total-price").html(value * prv + value1 * prv1);
    });
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload="addQt()">
  <div class="shopping-cart-container">
    <div class="shopping-cart">
      <!-- Title -->
      <div class="title">
        Корзина
      </div>
      <div class="item">
        <div th:each="el : ${session.cart}">
          <div class="buttons">
            <form th:action="'/cart/remove'" method="post">
              <button class="delete-btn" type="submit"></button>
            </form>
          </div>
          <div class="image">
            <img th:src="${session.cart['img']}" alt="" />
          </div>
          <div class="description">
            <span th:text="${session.cart['name']}"></span>
            <span th:text="${session.cart['item_size'] != null} ? ${session.cart['item_size']}"></span>
            <span th:text="${session.cart['color']}"></span>
          </div>
          <div class="quantity">
            <button id="plus-btn" type="button" name="button">
              <img src="plus.svg" alt="" />
             </button>
            <button id="minus-btn" type="button" name="button">
              <img src="minus.svg" alt="" />
            </button>
            <input id="cart_quantity" th:value="${session.cart['quantity']}" />
            <input type="number" id="price" th:value="${session.cart['price']}" readonly/>
          </div>
        </div>
        <div class="item">
          <div th:each="el : ${session.cart1}">
            <div class="buttons">
              <form th:action="'/cart1/remove'" method="post">
                <button class="delete-btn" type="submit"></button>
              </form>
            </div>
            <div class="image">
              <img th:src="${session.cart1['img']}" alt="" />
            </div>
            <div class="description">
              <span th:text="${session.cart1['name']}"></span>
              <span th:text="${session.cart1['item_size'] != null} ? ${session.cart1['item_size']}"></span>
              <span th:text="${session.cart1['color']}"></span>
            </div>
            <div class="quantity">
              <button id="plus-btn1" type="button" name="button">
                <img src="plus.svg" alt="" />
              </button>
              <button id="minus-btn1" type="button" name="button">
                <img src="minus.svg" alt="" />
              </button>
              <input id="cart_quantity1" th:value="${session.cart1['quantity']}" />
              <input type="number" id="price1" th:value="${session.cart1['price']}" readonly/>
            </div>
          </div>
          <div>Итого: <span id="total-price"></span>pуб.</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.