为什么jquery对象没有返回其值

Question

在过去的两天里，我一直在努力解决这个问题，但到目前为止还没有找到任何解决方案。

我试图将.click()侦听器附加到列表的所有元素，但每当我使用this或$(this)时，jquery函数都不起作用，例如使用.val()时，即使它有值，也会返回undefined。

我使用的是fomantic-ui，但我也尝试过同样的代码，但它也不起作用。我还使用NodeJS和Express，以防有什么不同。

进一步的测试表明，出于某种原因，这不起作用：

$('#first_name').on('input', () => {
const name = $(this)
const field = name.parent()
if (!name.val().match(/^p{L}{1,16}$/u)) {
field.attr('class', 'field error')
name.prop('valid', false)
} else {
field.attr('class', 'field success')
name.prop('valid', true)
}
})

但如果我把它改成这个，一切都很好：

$('#first_name').on('input', () => {
const name = $('#first_name') //Only Change...
const field = name.parent()
if (!name.val().match(/^p{L}{1,16}$/u)) {
field.attr('class', 'field error')
name.prop('valid', false)
} else {
field.attr('class', 'field success')
name.prop('valid', true)
}
})

而且这两个都返回错误的

console.log($(this) === $('#first_name'), $(this) == $('#first_name'))
//false false

我试过各种各样的组合，但我想不出有什么效果，我在网上找到的也没有。也许我只是不明白this应该如何工作，但我试着阅读了jquery文档，但它对我没有帮助。

有人能帮我吗？

Answer 1

您使用的是箭头函数，因此this的值将从父上下文继承。console.log应该会显示它是什么。

您可能想要使用一个常规的匿名函数，假设jQuery调用该函数时将HTML元素设置为this的上下文。

$('#first_name').on('input', function() {
// ...
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow函数没有自己的this或super绑定，并且不应用作方法。

Answer 2

这里有一个例子，我在输入组上使用类而不是id。

• 您的作用域问题通过使用函数的function(event){表单来解决
• 我使用CCD_；所有者；小组的成员
• 我使用容器ID:$('#inputs-container')钩住了事件处理程序
• 我使用一个数据属性并为其设置一个值；"创造性"；css取决于条件
• 如果出于某种原因需要获取容器，则可以使用event.delegateTarget——这是id为id="inputs-container"的容器元素
• 我还添加了CCD_；粘贴"；或者通过编程方式更改值
• 我建议你在脚本的行尾使用分号；在某些情况下，不这样做会导致一个很难找到的错误

我承认这有点过头了，但也许有人可以利用这个例子，尽管它确实有点"夸张"；冗长"；。试着在三个输入中的每一个输入文本、数字和空格。

$('#inputs-container').on('input change', '.first-name',function(event) {
const $input = $(this);
const field = $input.closest('.wrapper');
//console.log(field.data('goodness'), field.get(0).dataset);
let val = $input.val();
const regex = /^p{L}{1,16}$/u;
const isGood = val.match(regex) == val;
//console.log('Good:', val, isGood);
field.get(0).dataset.goodness = isGood ? "success" : "error";
$input.prop('valid', isGood);
});

.wrapper {
border: 1px solid #d0d0d0;
border-width: 0.5em;
padding: 0.5em;
}
.wrapper[data-goodness="error"] {
border-color: #FF0000;
border-width: 0.5em;
}
.wrapper[data-goodness="error"] .err-message:before {
content: "Do Better";
padding-left: 1em;
}
.wrapper[data-goodness="success"] {
border-color: #00FFdd;
}
.wrapper[data-goodness="success"] .err-message:before {
content: "Doing well so far!";
padding-left: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputs-container">
<div class="wrapper" data-goodness="cheers">
<div class="field-things">
<div class="field-name-thing">We are happy to have:</div>
<label>First Name</label>
<input type="text" class="first-name" /><span class="err-message"></span>
</div>
</div>
<div class="wrapper" data-goodness="cheers">
<div class="field-things">
<div class="field-name-thing">We are happy to have:</div>
<label>First Name</label>
<input type="text" class="first-name" /><span class="err-message"></span>
</div>
</div>
</div>
<div class="wrapper" data-goodness="cheers">
<div class="field-things">
<div class="field-name-thing">OUT OF SCOPE</div>
<label>First Name</label>
<input type="text" class="first-name" /><span class="err-message"></span>
</div>
</div>