使用自定义按钮输入的数字的增量值

如何解决使用自定义按钮输入的数字的增量值

一个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);
});

不幸的是，这不起作用。它触发console.log，但我得到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>