Question

我想要实现的是，当将鼠标悬停在具有id =＆＃34; a＆＃34;的li上时，相应的ul具有id =＆＃34; aa＆＃34;出现。我有这个HTML代码：

celery -A tasks worker --loglevel=info

和这个javascript代码：

<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>

并且它按预期工作，但here用户Jordan Gray表示可以摆脱循环，而是为所有列表项创建一个事件监听器 - 这就是我想在这里实现的。不幸的是，我不理解他的代码，如果有人能向我解释或建议解决方案，我会感激不尽。

Answer 1

您可以为父ul添加事件侦听器，并在此侦听器中使用目标元素，以便了解它触发的li。

ctn.addEventListener('mouseover', function(event) {
    // eventually safeguard it with: if (event.target.tagName !== 'LI') return
    id = event.target.id.repeat(2)
    document.getElementById(id).style.opacity = 1
}, false);

.passive {
    opacity: 0;
}

<ul id="ctn">
    <li id="a">Option1</li>
    <li id="b">Option2</li>
</ul>
<ul id="aa" class="passive">
    <li>Option1.1</li>
    <li>Option1.2</li>
</ul>
<ul id="bb" class="passive">
    <li>Option2.1</li>
    <li>Option2.2</li>
</ul>

Answer 2

以下是如何在代码中使用该逻辑：

File encryptedFile = new File("/Users/aktasberk/Desktop/Encrypted_"+inputFile.getName());

File encryptedFile;

Answer 3

var container = document.getElementById('container');

container.addEventListener('click', function(e) {
    if (e.target.nodeName.toUpperCase() !== "LI") return;

    var li = e.target;
    var ul = document.getElementById(li.id+li.id);
    li.addEventListener("mouseover", function() {
      ul.style.opacity = "1";
      ul.style.background = "blue";
      ul.style.color = "red";
    }, false);
});

<div id="container">
  <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>
</div>

Answer 4

等待悬停LI，然后显示其对应的元素：

 window.addEventListener("mouseover",function(e){
   var el = e.target;
   if(el.id && parseInt(el.id) < 10){
     document.getElementById(el.id*11).style.opacity = 0.7;
    }
 });

如何简化javascript事件监听器？

4 个答案: