非常感谢您的帮助，我已经尝试解决这个问题好几个小时了。
这就是我正在做的练习的解决方案:
<!doctype html>
<tab-panel>
<div data-tabname="one">Tab one</div>
<div data-tabname="two">Tab two</div>
<div data-tabname="three">Tab three</div>
</tab-panel>
<script>
function asTabs(node) {
let tabs = Array.from(node.children).map(node => {
let button = document.createElement("button");
button.textContent = node.getAttribute("data-tabname");
let tab = {node, button};
button.addEventListener("click", () => selectTab(tab));
return tab;
});
let tabList = document.createElement("div");
for (let {button} of tabs) tabList.appendChild(button);
node.insertBefore(tabList, node.firstChild);
function selectTab(selectedTab) {
for (let tab of tabs) {
let selected = tab == selectedTab;
console.log(selected)
tab.node.style.display = selected ? "" : "none";
tab.button.style.color = selected ? "red" : "";
}
}
selectTab(tabs[0]);
}
asTabs(document.querySelector("tab-panel"));
</script>
让我困惑的部分在第 13 行:
button.addEventListener("click", () => selectTab(tab));
通常在添加事件监听器时，您不需要将一个函数调用放在另一个函数中 - 像这样说就足够了:
button.addEventListener("click", selectTab(tab));
但是当我这样做时，会出现一个错误:
ReferenceError: tabs is not defined (line 15 in function selectTab)
called from line 7 in function Array.from.map.node
called from line 3 in function asTabs
called from line 25
这就是我迷路的地方。 感谢您一如既往的抽出时间
最佳答案
Normally when adding event listeners, you wouldnt need to place a function call inside another function - it would be sufficient to say something like this:
button.addEventListener("click", selectTab(tab));
那不是真的。
addEventListener 的第二个参数必须是一个函数。该函数将在事件发生时被调用。
selectTab(tab) 调用 selectTab 函数立即(将 tab 变量的值传递给它) .只有当该函数的返回值是另一个函数时，您才能这样做。
However when I do, an error comes up saying:
ReferenceError: tabs is not defined (line 15 in function selectTab)
tabs 被定义，然后 Array.from 调用完成评估。事件监听器作为评估的一部分添加。即在将值分配给 tabs 之前。
关于javascript - 从 Eloquent JavaScript 理解 eventListener 解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49163249/