Блог

Плагин WordPress устанавливает числовое поле, я не могу добавить дополнительный HTML до и после числового поля. Я уже добавил немного CSS, чтобы удалить стрелки по умолчанию.

Итак, я добавил два элемента с помощью jQuery до и после ввода:

 $('.enviso-group-form .quantity input').each(function(i, obj) {
    $(this).before('<span class="selectNumber__increase selectNumber__change"> </span>');
    $(this).after('<span class="selectNumber__decrease selectNumber__change">-</span>');

    $(this).val(0);
});
  

Приведенный выше код повторяет цикл над каждым вводом, добавляет два интервала и устанавливает значение в 0. До сих пор все работает. Вот как это выглядит:

Я также создал функцию для увеличения значения ввода чисел:

 $('.enviso-group-form .selectNumber__increase').on('click', function(e) {
  $oldValue = $(this).find('input').val();
  
  $newValue = parseInt($oldValue)   1;
  console.log(parseInt($newValue));
  $(this).next('input').val($newValue);
});
  

К сожалению, это не работает. Это запускает консоль.журнал, но я получаю NaN, а входное значение остается равным 0.

.find('input') найдет потомков

Получить потомков каждого элемента в текущем наборе сопоставленных элементов

Вы можете либо использовать next ( prev для другой кнопки), либо siblings либо вернет правильный результат.

 $oldValue = $(this).next('input').val();
  

или

 $oldValue = $(this).siblings('input').val();
  

 $('.enviso-group-form .quantity input').each(function(i, obj) {
    $(this).before('<span class="selectNumber__increase selectNumber__change"> </span>');
    $(this).after('<span class="selectNumber__decrease selectNumber__change">-</span>');

    $(this).val(0);
});

$('.enviso-group-form .selectNumber__increase').on('click', function(e) {
  $oldValue = $(this).next('input').val();
  
  $newValue = parseInt($oldValue)   1;
  console.log(parseInt($newValue));
  $(this).next('input').val($newValue);
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="enviso-group-form">
  <div class="quantity">
    <input type="number">
  </div>
</div>