Question

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

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

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

谢谢

JSFIDDLE

Answer 1

具有相同ID的多个Element是不正确的。由于document.getElementById依赖于只有一个带有id的元素，因此它不会按预期执行。您应该将代码更改为使用class而不是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/

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

1 个答案: