Question

<!DOCTYPE html>
<html>
<head>
    <title>Simple Todo</title>
    <link rel="stylesheet" href="source.css">
    <script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
</head>
    <body>
    <div class="container">
        <h2>TO-DO LIST</h2>
        <button id="slide">here!</button>
        <div>
            <input type="text" placeholder="Add New Todo">
        </div>
        <ul>
            <li>Buy Robes<button>Delete</button></li>
            <li>Go shopping<button>Delete</button></li>
            <li>Buy noodles<button>Delete</button></li>
        </ul>
    </div>
    <script type="text/javascript" src="source.js"></script>
    </body>
</html>

这是html文件。

var li=document.querySelectorAll("ul li");
var btn=document.querySelectorAll("li button");
for(i=0;i<li.length;i++){
    li[i].addEventListener("mouseover",function(){
        btn[i].style.display="block";
    });
}

这是链接到它的js。

我已将按钮设置为在CSS中显示：无；但是，当我将鼠标悬停在li上时，它似乎不起作用。

Answer 1

在for循环中使用let，以声明块作用域局部变量。您正在尝试将display="block"设置为已经可见的元素。首先使用CSS将display: none设置为这些元素：

var li = document.querySelectorAll("ul li");
var btn = document.querySelectorAll("li button");
for(let i=0;i<li.length;i++){
  li[i].addEventListener("mouseover",function(){
      btn[i].style.display="block";
  });
}

li > button{
  display: none;
}

<div class="container">
  <h2>TO-DO LIST</h2>
  <button id="slide">here!</button>
  <div>
      <input type="text" placeholder="Add New Todo">
  </div>
  <ul>
      <li>Buy Robes<button>Delete</button></li>
      <li>Go shopping<button>Delete</button></li>
      <li>Buy noodles<button>Delete</button></li>
  </ul>
</div>

为什么会出现错误“未捕获的TypeError：无法读取HTMLLIElement中未定义的属性'style'。”？

1 个答案: