Question

我正在Udemy上学习JavaScript，有一个任务是编写一个代码，当单击“查看更多”按钮时，该代码显示内容。

我无法理解this在显示内容代码中的工作方式，以及JavaScript如何理解变量t是什么。我在“质量检查”部分找到了解决方案，但不确定如何运行。显然，for i++循环代码是必需的，以便该代码适用于选项卡中的每个按钮。

问题：

this在这里如何工作，为什么有必要？
JavaScript如何理解t是什么？

let desctiptionTab = document.querySelectorAll('.description-btn');

for (let i = 0; i < desctiptionTab.length; i++) {
  desctiptionTab[i].addEventListener('click', function() {
    Modal(this);
  });
}

function Modal(t) {
  overlay.style.display = 'block';
  t.classList.add('more-splash');
  document.body.style.overflow = 'hidden';
};

Answer 1

在您的代码中，您试图在HTML元素的click事件上实现某些目标。这就是为什么要使用addEventListener附加点击事件的原因。

现在，JS中的函数通常具有运行时范围（除非您使用call，bind或apply More Info），这意味着this调用函数时，值可以根据上下文而变化。对于您来说，this的值是单击的HTML元素，您将使用该HTML元素将其作为参数Modal(t)传递给t。

document.getElementById('hello').addEventListener('click', function() {
  console.log(this);
});

<div id="hello">Hello</div>

当单击按钮时，“ this”如何在显示描述功能中起作用？

1 个答案: