我想要实现的是，当鼠标悬停在 id="a" 的 li 上时，会出现对应的 id="aa" 的 ul。我有这个 html 代码：
<ul>
<li id="1">Option1</li>
<li id="2">Option2</li>
</ul>
<ul id="11">
<li>Option1.1</li>
<li>Option1.2</li>
</ul>
<ul id="22">
<li>Option2.1</li>
<li>Option2.2</li>
</ul>
和这个 javascript 代码：
for (i=1; i<3; i++) {
var fn = (function(i) {
var li = document.getElementById(i);
var ul = document.getElementById("" + i + i);
li.addEventListener("mouseover", function() {
ul.style.opacity = "1";
}, false);
})(i);
}
它按预期工作，但用户 Jordan Gray在这里表示可以摆脱循环，而是为所有列表项创建一个事件侦听器 - 这就是我想在这里实现的目标。不幸的是，我不明白他的代码，如果有人能向我解释或提出解决方案，我将不胜感激。
以下是在代码中使用该逻辑的方法：
var ul = document.getElementById('ul-id');
ul.addEventListener('mouseover', function(e) {
if (e.target.nodeName.toUpperCase() !== "LI") return;
document.getElementById("" + e.target.id + e.target.id).style.opacity = "0.6";
});<ul id="ul-id">
<li id="1">Option1</li>
<li id="2">Option2</li>
</ul>
<ul id="11">
<li>Option1.1</li>
<li>Option1.2</li>
</ul>
<ul id="22">
<li>Option2.1</li>
<li>Option2.2</li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句