Question

当我单击li的其中一个时，试图通过一条线来工作，我正在跟踪视频，但我无法弄清错误，我已确保将文件保存几次。继承人js中的代码：

var lis = document.querySelectorAll("li");

for(var i = 0; i < lis.length; i++){
    lis[i].addEventListener("mouseover", function(){
        this.style.color = "green";
    });

    lis[i].addEventListener("mouseout", function(){
        this.style.color = "black";
    });

    lis[i].addEventListener("click", function(){
        this.classList.toggle("done");
    });
}

和CSS中的代码：

.done {
     text-decoration: line-through;
    opacity: 0.5;   
}

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Todo List Demo</title>
    <link rel="stylesheet" type="text/css" href="todos.css">
</head>
<body>

    <ul>
        <li>Wash cat</li>
        <li>Feed cat</li>
        <li>Feed cat to dog</li>
    </ul>

<script type="text/javascript" src="todos.js"></script>

</body>
</html>

Answer 1

也许您的js代码和CSS链接不正确，运行并在 li 上单击它，即可正常运行。

还要注意，元素<link>和<script>的“ type”属性是可选的。

 var lis = document.querySelectorAll("li");
    
    for(var i = 0; i < lis.length; i++){
    	lis[i].addEventListener("mouseover", function(){
    		this.style.color = "green";
    	});
    
    	lis[i].addEventListener("mouseout", function(){
    		this.style.color = "black";
    	});
    
    	lis[i].addEventListener("click", function(){
    		this.classList.toggle("done");
    	});
    }

.done {
     text-decoration: line-through;
    opacity: 0.5;   
}

<!DOCTYPE html>
<html>
<head>
    <title>Todo List Demo</title>
    <link rel="stylesheet"  href="todos.css">
</head>
<body>

    <ul>
        <li>Wash cat</li>
        <li>Feed cat</li>
        <li>Feed cat to dog</li>
    </ul>

<script type="text/javascript" src="todos.js"></script>

</body>
</html>

单击时，类中使用的直通没有任何作用

1 个答案: