在输入事件上获取最后一个输入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" />

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

我希望能够判断我输入的那个（打字）是否是班级付款的最后一个框。

Answer 1

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

1. 将所有input字段放入div元素

2. 将if条件更改为if($(this).is('input:last'))

Answer 2

尝试此更改

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") - 选择作为其父级的最后一个<input>元素的每个<input>元素：

有关详细信息，请访问link

Answer 3

＆＃13;

＆＃13;

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")
    }
  }


})

＆＃13;

input{display:block}

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

检查索引是否等于班级长度