javascript - 列表项仅在第一项上显示 javascript 函数（项目具有相同的 ID）

Question

我正在制作一个ul并且每个li都有相同的 ID 以保持代码简单、干净和高效。

当我应用我的脚本功能时，它们只适用于第一个li.

如何将功能应用于li悬停的？

谢谢

JSFIDDLE

Answer 1

拥有多个具有相同 id 的元素是不正确的。由于 document.getElementById 依赖于只有一个具有 id 的元素这一事实，因此它不会达到您的预期。您应该更改代码以使用类而不是 id。

---

或者，您可以使用 querySelector 代替它对 id 不做任何假设：

function openHiddenItems(evt) {
  if (evt.target.id !== 'list-item') return;
  evt.target.querySelector('#red-square').style.visibility = 'visible';
  evt.target.querySelector('#yellow-circle').style.visibility = 'visible';
}

function closeHiddenItems(evt) {
  if (evt.target.id !== 'list-item') return;
  evt.target.querySelector('#red-square').style.visibility = 'hidden';
  evt.target.querySelector('#yellow-circle').style.visibility = 'hidden';
}

还要确保将事件传递给您的打开和关闭函数。我建议将 JS 代码和 HTML 分开：

var elements = document.querySelectorAll('#list-item');

for (var i=0; i<elements.length; i++) {
  elements[i].addEventListener('mouseover', openHiddenItems);
  elements[i].addEventListener('mouseout', closeHiddenItems);
}

编辑：如果您将鼠标悬停在元素变得可见/隐藏的位置上，则功能之间会出现回退。也可以通过查看当前悬停的元素是否在#list-item.

这是一个演示：http: //jsfiddle.net/GfqDj/11/