<!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。
我已将按钮设置为 display:none; 在 css 中。 但是当我将鼠标悬停在 li 上时，它似乎不起作用。
最佳答案
使用let在声明 block 作用域局部变量的 for 循环中。您正在尝试将 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>关于javascript - 为什么我在 HTMLLIElement 处收到错误 "Uncaught TypeError: Cannot read property ' style' of undefined。”？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51194472/