使用此关键字通过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

请勿使用箭头功能。他们不重新绑定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 2

尝试一下：

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

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

这将输入置于单独的函数中，以防止this变量被覆盖。

Answer 3

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

// 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());
      });
    });