如何使用最小和最大屬性添加和減去輸入值。 jQuery的

Question

我正在創建一個表單，在這種情況下，用戶可以在輸入字段的值中添加和減去，以顯示多個子級。

自然，我可以在屏幕上顯示的數字上進行加減，但是當我在控制台中簽入時，實際值保持為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>