Question

当我增加一个值时，我应该使用仅存储整数的两个输入值，另一个值应减少。如果第二个值达到0，则必须停止。

包含要减少的值的字段用ID form_val62_1命名，可以通过用户输入增加的字段称为form_val63_1。我之所以调用此函数onChange()是因为我需要传递表单的ID（这是因为表单字段是根据PHP数组长度动态生成的。）

  function check(i) {
        $("#form_val63_" + i ).change(function () {
          var direction = this.defaultValue < this.value;
          this.defaultValue = this.value;
          var val;
          val = parseInt($("#form_val62_" + i).val());
          if (direction) {
            if (val > 0) {
              $('#form_val62_' + i).val(parseInt($(this).val()) - 1);
            } else {
              var thvar = $(this).val();
              $(this).val(thvar - 1);
            }
            console.log("increase 503");
            console.log(val);
          } else {
            $('#form_val62_' + i).val(parseInt($(this).val()) + 1);
            console.log("decrease 503");
            console.log(val);
          }
        });
      }

Fiddle

我在这里遇到了很多问题，第一次减少了一次，没有任何理由增加了（我知道有，但是看不到为什么）。

使用@ Ph0b0x提供的解决方案，我将代码更新为

 var v = $("#form_val62_" + i).val(); //Let's say this is the value from PHP....
                var preVal = 0;

                $("#form_val62_" + i).val(v);

                $("#form_val63_" + i).on("change keyup keydown", function(event) {
                    let currVal = parseInt($("#form_val63_" + i).val());

                    console.log(preVal);
                    console.log(currVal);

                    if (currVal == 0) {
                        preVal = 0;
                        $("#form_val62_" + i).val(v);
                    } else if (currVal <= v) {
                        $("#form_val62_" + i).val((v - currVal) == 0 ? 0 : (v - currVal));
                        preVal = currVal;
                    } else {
                        $("#form_val63_" + i).val(v);
                    }

                });

现在我可以增加结果，但是当我尝试减小时，每个值仍为0。

Answer 1

我想，如果我理解正确，我将跟踪第二个输入上的先前值，然后我将开始减少第一个输入，直到达到0，再增加到10。 Fiddle

HTML

<form>
  <input id="form_val62_1" type="number" min="0" value="10" />
  <input id="form_val63_1" type="number" min="0" value="0" />
</form>

JS

var v = 13; //Let's say this is the value from PHP....
var preVal = 0;

$("#form_val62_1").val(v);

$("#form_val63_1").on("change keyup keydown", function(event) {
  let currVal = parseInt($("#form_val63_1").val());

  console.log(preVal);
  console.log(currVal);

  if (currVal == 0) {
    preVal = 0;
    $("#form_val62_1").val(v);
  } else if (currVal <= v) {
    $("#form_val62_1").val((v - currVal) == 0 ? 0 : (v - currVal));
    preVal = currVal;
  } else {
    $("#form_val63_1").val(v);
  }

});

编辑：我已经根据您的评论更新了代码。请查看此Fiddle

Answer 2

因此在两个元素上绑定更改事件处理程序。我将只使用数据属性，因此您不必担心通过ID选择两者之间的绑定。

onSubmit() {
  // After you delete the person
  const personToDelete = this.person.filter(person => person.id === personInd.id)[0];
  this.person.slice(this.person.indexOf(personToDelete), 1);
}

$('[data-num-grp]').on('input', function () {
  // input that was interacted with
  const inp1 = $(this);
  // get the group number
  const grp = inp1.data('num-grp')
  // select the other element with the grp
  const inp2 = $('[data-num-grp="' + grp + '"]').not(inp1);
  // alter the other element so it's value changes
  inp2.val(this.max - this.value)
});

增加另一个输入值时减小数字输入值

2 个答案: