@deespe1

Как менять цену товара только на определенной форме?

5b0b6ccba084f398734159.png

Если несколько форм. Для них написал код, который подсчитывает стоимость товара в зависимости от его количества.

$(document).ready(function(){
    $(this).change(function(){
        $price = $('.price').text();
        $num_count = $('#num_count').val();
        $price = $price * $num_count;
        $('.price').html($price);
});
});


<form action="" class="d-flex flex-column" id="form-door-1">
              <select name="" id="" class="mt-5">
                <option value="" disabled="">Цвет</option>
                <option value="" selected="">Венге</option>
                <option value="">Орех</option>
              </select>

              <select name="" id="">
                <option value="" disabled="">Размер</option>
                <option value="" selected=">Венге</option>
                <option value="">Орех</option>
              </select>
              <div class="d-flex">
                <input type="number" step="1" min="0" max="10" id="num_count" name="quantity" value="1" title="Qty">  <label for="">Количество</label>
              </div>
            </form>
            <div class="price-box">
            <div class="price">5</div><div class="rub">рублей</div>
            </div>


Ошибка в том, что когда меня количество товара, цена меняется на всех формах. Понимаю, что нужно использовать this, но не получается. Подскажите советом)
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
Lumore
@Lumore
Front-end developer
  1. Нужно поменять id на class у инпутов количества (id на странице должен быть уникальным)
  2. У JavaScript нет строгой типизации, так что, перед тем как делать вычисления, нужно перевести данные в integer - parseInt(значение)
  3. Нужно сохранять первое значение цены, иначе подсчеты будут неверными

https://codepen.io/anon/pen/dKbPKy?editors=0010
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
rim89
@rim89
программист-велосипедист
использовать https://jquery-docs.ru/closest/ , чтобы подняться по дереву вверх от select/input до родителя, потом спуститься в глубь, до цены и поменять ее , а не менять глобально
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы