在输入事件上获取最后的输入 jquery

Question

var sum = 0;
$(document).on("input", ".payments", function() {
  var amount = 100;
  var values = [];
  $('input').each(function(index, element) {
    values.push(parseInt($(element).val(), 10) || 0);
  });

  var total = values.reduce(function(sum, val) {
    return sum + val;
  }, 0);
  var diff = amount - total;
  if ($(this).is(':last-child')) {
    if (diff > 0) {
      console.log("last not ok")
    } else {
      console.log("last ok")
    }
  } else {
    if (diff >= 0) {
      console.log("ok")
    } else {
      console.log("not ok")
    }
  }


})

input{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />

在演示中，当我在框中输入并到达最后一个框时，它不会进入最后一个框的状态。

我想知道我正在输入（打字）的那个是否是 class 付款的最后一个盒子。

Answer 1

var sum = 0;
$(document).on("input", ".payments", function() {
  var amount = 100;
  var values = [];
  $('input').each(function(index, element) {
    values.push(parseInt($(element).val(), 10) || 0);
  });

  var total = values.reduce(function(sum, val) {
    return sum + val;
  }, 0);
  var diff = amount - total;
  if ($(this).index() == ($(".payments").length)) {
    if (diff > 0) {
      console.log("last not ok")
    } else {
      console.log("last ok")
    }
  } else {
    if (diff >= 0) {
      console.log("ok")
    } else {
      console.log("not ok")
    }
  }


})

input{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />

检查索引是否等于 class 长度

Answer 2

:last-child 不工作的原因是因为输入字段不在任何标签内，因此它们不是任何父项的子项。所以有两种方法可以解决这个问题，

将所有 input 字段放在 div 元素中
将if条件改为if($(this).is('input:last'))

Answer 3

试试这个改变

var sum = 0;
$(document).on("input", ".payments", function() {
  var amount = 100;
  var values = [];
  $('input').each(function(index, element) {
    values.push(parseInt($(element).val(), 10) || 0);
  });

  var total = values.reduce(function(sum, val) {
    return sum + val;
  }, 0);
  var diff = amount - total;
  if ($(this).is(':last-of-type')) { // I have changed this line
    if (diff > 0) {
      console.log("last not ok")
    } else {
      console.log("last ok")
    }
  } else {
    if (diff >= 0) {
      console.log("ok")
    } else {
      console.log("not ok")
    }
  }


})

input{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />

我希望这会奏效

编辑： $("input:last-of-type") - Select 每个 <input> 元素是其父元素的最后一个 <input> 元素：

有关详细信息，请访问 link

在输入事件上获取最后的输入 jquery

on input event get last input jquery

jquery

jquery-selectors