“这”指的是哪里？(javascript30 -- Wes第10天)
首先，我是一个日本初学者网络开发学习者。所以，我的英语可能很奇怪，而且我没有足够的编程知识。我正在上一门名为javascript30的课程，重点是香草JS和
我目前正在制定一个方案，通过按shift按钮并单击它来检查多个复选框(如果我的解释没有产生效果，请复制并粘贴下面的源代码)
根据源代码，我必须通过设置if语句来改变"inBetween“的布尔值。我可以理解他在做什么，但我不明白"this“”复选框=== this“指的是哪里？为什么编写“复选框=== this”这样的代码意味着它会检查复选框是否被选中？我也很难理解“let lastChecked”的意思。我理解“"lastChecked”let lastChecked“是检查它是否是用户选中的最后一个复选框的关键，但是为什么他设置了"let lastChecked = this”这样的值呢？对不起，句子长，英语差。如果有人解释的话我会很高兴的。我将粘贴下面的源代码。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hold Shift to Check Multiple Checkboxes</title>
</head>
<body>
<style>
html {
font-family: sans-serif;
background: #ffc600;
}
.inbox {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 10px 10px 0 rgba(5, 5, 5, 0.1);
}
.item {
display: flex;
align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
border-bottom: 0;
}
input:checked + p {
background: #F9F9F9;
text-decoration: line-through;
}
input[type="checkbox"] {
margin: 20px;
}
p {
margin: 0;
padding: 20px;
transition: background 0.2s;
flex: 1;
font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
border-left: 1px solid #D1E2FF;
}
</style>
<div class="inbox">
<div class="item">
<input type="checkbox">
<p>This is an inbox layout.</p>
</div>
<div class="item">
<input type="checkbox">
<p>Check one item</p>
</div>
<div class="item">
<input type="checkbox">
<p>Hold down your Shift key</p>
</div>
<div class="item">
<input type="checkbox">
<p>Check a lower item</p>
</div>
<div class="item">
<input type="checkbox">
<p>Everything in between should also be set to checked</p>
</div>
<div class="item">
<input type="checkbox">
<p>Try do it without any libraries</p>
</div>
<div class="item">
<input type="checkbox">
<p>Just regular JavaScript</p>
</div>
<div class="item">
<input type="checkbox">
<p>Good Luck!</p>
</div>
<div class="item">
<input type="checkbox">
<p>Don't forget to tweet your result!</p>
</div>
</div>
<script>
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
let lastChecked;
function handleCheck(e) {
// Check if they had the shift key down
// AND check that they are checking it
let inBetween = false;
if (e.shiftKey && this.checked) {
// go ahead and do what we please
// loop over every single checkbox
checkboxes.forEach(checkbox => {
console.log(checkbox);
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
console.log('Starting to check them in between!');
}
if (inBetween) {
checkbox.checked = true;
}
});
}
lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
</script>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2022-02-06 10:53:50
this是指在调用checkbox.addEventListener中的函数之后单击的复选框。在这种情况下，只要单击复选框(或者您可以将其称为--带有选择器.inbox input[type="checkbox"]的元素)，将调用函数handleCheck，并将this引用到单击的复选框。
欲了解更多信息，请访问“这”是什么意思？和为什么在这种情况下“此”被引用到复选框中？。它们提供了比我的解释更详细和更技术性的信息:)
Stack Overflow用户
发布于 2022-02-06 11:54:32
在非箭头事件侦听器中，this引用事件目标，即选中/未选中的复选框。
由于您提到您是初学者，我希望您尽可能避免使用this &而是使用event.target来引用事件侦听器中的目标元素。
this的主要含义取决于上下文&如果您使用jQuery/jQueryUI，则更多。
https://stackoverflow.com/questions/71006376
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号