0

Есть несколько блоков такого вида:

<div class="basket-option">
 <div class="basket-option-icon">
  <img src="/wp-content/themes/template/img/sauce.svg" alt="basket option">
 </div>
<div class="basket-option-title">Соус</div><div class="basket-option-count">
<div class="count">
  <button type="button" class="count-minus">-</button>
  <input type="text" value="0" id="qty">
   <button type="button" class="count-plus">+</button>
</div>
</div>
<div class="basket-option-price">Бесплатно</div>
</div>

Сейчас при клике по .count-minus и .count-plus меняется количество #qty, нужно сделать так что бы при изменении кол-ва, если оно больше 0 добавлять в форму #form-present имя и кол-во Если сделать так то каждый раз добавляется новые блоки input, а нужно что бы значения изменялись:

jQuery(".count-plus").click(function(){
     var dop_val_qty = jQuery(this).siblings("input").val();
     var dop_val_name = jQuery(this).parents(".basket-option-count").siblings(".basket-option-title").text();
     if (dop_val_qty > 0) {
        jQuery("#form-present").append('<input type="hidden" name="dop-name" id="dop-name" value="' + dop_val_name + '">');
        jQuery("#form-present").append('<input type="hidden" name="dop-qty" id="dop-qty" value="' + dop_val_qty + '">');
     }
     else {
        jQuery("#dop-name").remove();
        jQuery("#dop-qty").remove();
     }
        
    });

если делать html() а не append() другие блоки не учитываются

2
  • Я не скажу что так как Вы добавляете нельзя, просто я при работе с DOM создаю элемент таким образом var a = document.createElement('input'); Далее приваиваю атрибуты. Далее беру какой нибудь элемент в который необходимо вставить m = document.getElementById('kakoytoid'); и вставляю m.parentNode.insertBefore(a,m); может быть и Вам так же попробовать? 15 окт 2020 в 0:58
  • Не так прочитал Ваш вопрос. Вообще .append это вставить в конец элемента. То есть если Вы хотите изменить по append то Вам нужно ещё и чистить блок от старых элементов. Чтобы поменять значение input можно выполнить $("input[name='dop-name']").val('Новое значение инпута'); и аналогично для другого, просто обращайтесь к input по другому имени 15 окт 2020 в 1:03

1 ответ 1

0

$('.count-minus, .count-plus').on('click', function(){
  let parent = $(this).closest('.basket-option'), // Получаем option
      count = Number(parent.find('.count-num').val()), // Получить значение
      name = parent.find('.basket-option-title').text().trim(); // получаем наименование
  // -------
  $(this).hasClass('count-plus') ? count++ : count--;
  parent.find('.count-num').val(count); // Меняем счётчик
  // -------
  if($(this).hasClass('count-plus') && count === 1) { // Если +1 товар, то
    $('#form-present') // В форму..
        .append('<input type="text" name="dop-name" id="dop-name" value="'+name+'">\
      <input type="text" name="dop-qty" id="dop-qty" value="'+count+'">'); // .. Добавляем инпуты с данными
  } else if($(this).hasClass('count-minus') && count === 0) { // если -1 товар
    $('#form-present') // То в форме..
        .find('#dop-name, #dop-qty') // .. находим добавленные инпуты..
        .remove(); // .. и удаляем их
  }
  // -------
  if(count > 0) { // Если товара больше нуля
    $('#form-present') // То в форме..
      .find('#dop-qty').val(count); // .. меняем значение товара
    // Советую дописать слушатель, который будет изменять значение выше, когда инпут .count-num редактируется вручную (не через "-" или "+")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="basket-option">
  <div class="basket-option-icon">
    <img src="/wp-content/themes/template/img/sauce.svg" alt="basket option">
  </div>
  <div class="basket-option-title">Соус</div>
  <div class="basket-option-count">
    <div class="count">
      <button type="button" class="count-minus">-</button>
      <input class="count-num" type="text" value="0" id="qty">
      <button type="button" class="count-plus">+</button>
    </div>
  </div>
  <div class="basket-option-price">Бесплатно</div>
</div>

<div id="form-present"></div>

2
  • Спасибо за ответ, но у меня почему то не срабатывает код, ошибок нет но не добавляет в форму
    – ilyaaa521
    15 окт 2020 в 2:02
  • @ilyaaa521, проверьте названия элементов.
    – De.Minov
    15 окт 2020 в 10:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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