我可以改变一个函数，使用循环到一个更快的只有纯JavaScript，(没有jQuery)?

Question

我有下面的函数，用于显示一个div并隐藏所有其他的。

async function showHide(showId, hideList) {
let ele = document.getElementById(showId);
await hideList.forEach(item => {
item.style.display = 'none';
});
ele.style.display = 'block';
}

#c2,
#c3,
#c4 {
display: none;
}
li {
cursor: pointer;
}

<div>
<li onclick="showHide('c1', [c2,c3,c4]);">Show One</li>
<li onclick="showHide('c2', [c1,c3,c4]);">Show Two</li>
<li onclick="showHide('c3', [c1,c2,c4]);">Show Three</li>
<li onclick="showHide('c4', [c1,c2,c3]);">Show Four</li>
<div id="c1">Showing Item 1</div>
<div id="c2">Showing Item 2</div>
<div id="c3">Showing Item 3</div>
<div id="c4">Showing Item 4</div>
</div>

该功能工作得很好，但我想知道是否有更快，更短或更好的方法来做到这一点?理想情况下，以上三个结合起来会很好。

Answer 1

<li>作为<div>的子元素在语法上是无效的——列表项只能是列表元素的子元素。要么使用一个列表元素来包围<li>s(并且仅<li>s)，要么使用不同的标记，如按钮或span。

forEach没有返回任何东西，所以await没有任何帮助。

考虑使用不同的选择器方法一次性选择所有id，而不是遍历其他id的数组。一个不错的方法是将它们全部放在同一个容器中，然后选择容器的子元素。然后，可以使用被单击的元素在其容器中的索引来确定要在下面显示的匹配元素。

不要使用内联处理程序——这是非常糟糕的做法。使用JavaScript正确地附加侦听器。

与其直接赋值元素的样式，不如考虑切换一个CSS类。

const ul = document.querySelector('ul');
const items = document.querySelectorAll('.item-container > div');
ul.addEventListener('click', (e) => {
if (!e.target.matches('li')) return;
const indexToShow = [...ul.children].indexOf(e.target);
items.forEach((item, i) => {
item.classList.toggle('show', i === indexToShow);
});
});

li {
cursor: pointer;
}
.item-container > div:not(.show) {
display: none;
}

<ul>
<li>Show One</li>
<li>Show Two</li>
<li>Show Three</li>
<li>Show Four</li>
</ul>
<div class="item-container">
<div class="show">Showing Item 1</div>
<div>Showing Item 2</div>
<div>Showing Item 3</div>
<div>Showing Item 4</div>
</div>

在没有硬编码id的情况下，JavaScript的通用功能有点长，但这是使HTML和CSS减少重复的代价。