使用 this 关键字遍历 jquery 选择器

Question

所以我有一个 jQuery 代码，它在单击按钮时记录我页面上每个输入字段的值：

我已经在输入上用 forEach 方法尝试过这个方法，但它说它不是一个函数，为什么我不能在这里使用这个方法？

$("#submit").click(e => {
  e.preventDefault();

  let inputs = $("input");

  inputs.each(() => {
    console.log($(this).val());
  });
});

但是这里的问题是这里的this关键字指的是#submit，我这里只用this关键字怎么能达到我的目的，为什么会这样这里指的是 #submit 而不是 input？提前致谢。

Answer 1

这是一种可能的解决方案；

// should always to assign vars first and then use them
var $this = $(this);
var $submit = $("#submit");
$submit.click(e => {
      e.preventDefault();

      let inputs = $("input");

      inputs.each(function() {
        console.log($(this).val());
      });
    });

Answer 2

不要使用箭头函数。他们不会重新绑定 this。
相反，使用封闭词法范围的 this。

$("#submit").click(e => {
  e.preventDefault();

  let inputs = $("input");

  inputs.each(function(){
    console.log($(this).val());
  });
});

应该可以正常工作。

有关箭头函数和 this 行为的更多信息：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 3

试试这个：

function getInputs(){
  let inputs = $("input");

  inputs.forEach(() => {
    console.log($(this).val());
  });
}
$("#submit").click(e => {
  e.preventDefault();
  getInputs()
});

这会将输入放在一个单独的函数中，防止 this 变量被覆盖。

使用 this 关键字遍历 jquery 选择器

Using the this keyword to itterate through a jquery Selector

javascript

jquery

this