javascript - 如何使用最小和最大属性添加和减去输入值。查询

Question

我正在创建一个表单，在这种情况下，用户可以从输入字段的值中添加和减去以显示多个子项。

当然，我可以对屏幕上显示的数字进行加减，但是当我在控制台中 checkin 时，实际值仍为 0。能够检查这个值对我来说很重要，这样我就可以设置最小和最大数量。

如何确保点击按钮时值发生变化？

JS:

childVal = $('#pageSearch-children').val();
minValueChild = $('#pageSearch-children').attr('min');
maxValueChild = $('#pageSearch-children').attr('max');

if (childVal < maxValueChild) {
    $('.add').click(function () {
        $('#pageSearch-children').val( function(i, oldval) {
            return ++oldval;
        });
        $('#pageSearch-children').val() + 1;
    });
}
if (childVal > minValueChild) {
    $('.sub').click(function () {
        $('#pageSearch-children').val( function(i, oldval) {
            return --oldval;
        });
        $('#pageSearch-children').val() - 1;
    });
}

HTML:

<h3 class="white black">
    <input class="backgroundNoneInput" type="number" value="0" id="pageSearch-children" name="children" min="0" max="{{ $property--property_sleeps or '99' }}"> 
</h3>
<button type="button" class="sub backgourndNoneButt">
    <span class="white fa fa-minus fa-2x faPlusMin" aria-hidden="true">                      
    </span>
</button>
<button type="button" class="add backgourndNoneButt">
    <span class="white fa fa-plus fa-2x faPlusMin" aria-hidden="true">                        
    </span>
</button>

Answer 1

我建议您将代码更改为以下内容以使其更好地工作:

childVal = $('#pageSearch-children').val();
minValueChild = $('#pageSearch-children').attr('min');
maxValueChild = $('#pageSearch-children').attr('max');
$('.add').click(function() {
  if (childVal < maxValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return ++oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});
$('.sub').click(function() {
  if (childVal > minValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return --oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});

其中一个问题是您的 $('.sub').click 永远不会运行，因为它永远不会通过 if (childVal > minValueChild) {原始代码。

演示

childVal = $('#pageSearch-children').val();
minValueChild = $('#pageSearch-children').attr('min');
maxValueChild = $('#pageSearch-children').attr('max');
$('.add').click(function() {
  if (childVal < maxValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return ++oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});
$('.sub').click(function() {
  if (childVal > minValueChild) {
    $('#pageSearch-children').val(function(i, oldval) {
      return --oldval;
    });
    childVal = $('#pageSearch-children').val();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="white black">
  <input class="backgroundNoneInput" type="number" value="0" id="pageSearch-children" name="children" min="0" max="99" readonly> Children
</h3>
<button type="button" class="sub backgourndNoneButt">
    <span class="white fa fa-minus fa-2x faPlusMin" aria-hidden="true">   sub                   
    </span>
</button>
<button type="button" class="add backgourndNoneButt">
    <span class="white fa fa-plus fa-2x faPlusMin" aria-hidden="true">      add                  
    </span>
</button>