javascript - .change() Jquery 不工作

Question

我有一系列 xyz 类的元素。要求是用户只需要在其中输入一个数字。然后我需要连接它们。例如，他们的仪表会显示 1 2 0 0。

我有下面。

$('.xyz').change(function () {
     console.log($(this));
     arrayNums.length = 0;
     var thisRead = parseInt(CombinedNumber(arrayNums), 10);
     var lastRead = parseInt($('.abcd').html(), 10);
     if ((thisRead - lastRead) <= 1) {
         $('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?");
         $('#idthing').attr('style' , 'color: red !important');
     }
     else { $('#idthing').text(thisRead - lastRead + ' KWH');}
});

function CombinedNumber(arrayNums) {
        combined = "";
        $('.xyz').each(function (index) {
            arrayNums.push($(this).val());
        });
        $.each(arrayNums, function (index, value) {
            combined += value;
        });
        console.log(combined);
        return combined

这是第一次工作，如果用户在点击提交按钮之前点击离开该区域，但他们可能会先点击提交按钮。此外，它会在第一次发生后停止计算!

我试图在每次有人输入数字时进行响应式计算。这是 DOM 部分。

<div>
  <ul>
   <li>
       <input class="xyz">
   </li>
   <li>
       <input class="xyz">
   </li>
  </ul>
</div>

Answer 1

使用input事件而不是 change 作为 change 处理程序将仅在元素的 focus 丢失时被调用。

var arrayNums = [];
$('.xyz').on('input', function() {
  console.log($(this));
  arrayNums.length = 0;
  var thisRead = parseInt(CombinedNumber(arrayNums), 10);
  var lastRead = parseInt($('.abcd').html(), 10);
  if ((thisRead - lastRead) <= 1) {
    $('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?");
    $('#idthing').attr('style', 'color: red !important');
  } else {
    $('#idthing').text(thisRead - lastRead + ' KWH');
  }
});

function CombinedNumber(arrayNums) {
  combined = "";
  $('.xyz').each(function(index) {
    arrayNums.push($(this).val());
  });
  $.each(arrayNums, function(index, value) {
    combined += value;
  });
  console.log(combined);
  return combined;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <input class="xyz">
    </li>
    <li>
      <input class="xyz">
    </li>
  </ul>
</div>