动态设置输入组最小值和最大值

Question

我正在寻找一种使用加号和减号按钮更新或验证动态输入组输入的最小值和最大值的方法。

这是我到目前为止所做的：

HTML

 <div class="center">

  <div class="input-group">

    <span class="input-group-btn">

      <button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="numbergroup'+thisgroupid+'id'+buttonid+'max&'+row.max+'"">

        <span class="glyphicon glyphicon-minus"></span>

      </button>

    </span>

    <input type="text" name="numbergroup'+thisgroupid+'id'+buttonid+'max&'+row.max+'"" value="0" class="form-control input-number" min="'+row2.min+'"  max="'+row2.max+'">

    <span class="input-group-btn">

      <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="numbergroup'+thisgroupid+'id'+buttonid+'max&'+row.max+'"">

        <span class="glyphicon glyphicon-plus"></span>

      </button>

    </span>

  </div>

</div>

JS

 $('.btn-number').click(function(e){

e.preventDefault();

fieldName = $(this).attr('data-field');

console.log(fieldName)

 var grpmax = fieldName.split('&')[1];

 console.log(grpmax)

type      = $(this).attr('data-type');

 console.log(type)

var input = $("input[name='"+fieldName+"']");

var currentVal = parseInt(input.val());

if (!isNaN(currentVal)) {

    if(type == 'minus') {

        if(currentVal > input.attr('min')) {

            input.val(currentVal - 1).change();

        } 

        if(parseInt(input.val()) == input.attr('min')) {

            $(this).attr('disabled', true);

        }

    } else if(type == 'plus') {

        if(currentVal < input.attr('max')) {

            input.val(currentVal + 1).change();

        }

        if(parseInt(input.val()) == input.attr('max')) {

            $(this).attr('disabled', true);

        }

    }

} else {

    input.val(0);

}

});

$('.input-number').focusin(function(){

   $(this).data('oldValue', $(this).val());

});

$('.input-number').change(function() {

minValue =  parseInt($(this).attr('min'));

maxValue =  parseInt($(this).attr('max'));

valueCurrent = parseInt($(this).val());

我正在为每个输入字段设置min和max值，但我没有为将要创建的每个输入组设置min和max值。我需要设置组最大值或添加验证以检查组的总值是否小于或等于grpmax

Answer 1

尝试function add(groupId,val) {&nbsp; let inp = document.querySelector(`[name=numbergroup_${groupId}]`);&nbsp; inp.value= +inp.value + val;&nbsp; if(inp.value<+inp.min) inp.value=inp.min;&nbsp; if(inp.value>+inp.max) inp.value=inp.max;}Min:-2, Max:5<div class="center">&nbsp; <div class="input-group">&nbsp; &nbsp; <span class="input-group-btn">&nbsp; &nbsp; &nbsp; <button type="button" onclick="add(123,-1)" >&nbsp; &nbsp; &nbsp; &nbsp; <span class="glyphicon glyphicon-minus">-</span>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </span>&nbsp; &nbsp; <input type="text" name="numbergroup_123" value="0"&nbsp; min="-2"&nbsp; max="5">&nbsp; &nbsp; <span class="input-group-btn">&nbsp; &nbsp; &nbsp; <button type="button" onclick="add(123,1)" >&nbsp; &nbsp; &nbsp; &nbsp; <span class="glyphicon glyphicon-plus">+</span>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </span>&nbsp; </div></div>