这是我的ejs模板,其中包含一个jQuery。一旦我单击完成按钮,它应该更改bg-color列表项,但它甚至不在脚本部分。
我的ejs正常运行,但是里面的jquery困扰了我。
有人可以帮忙吗?
我在HTML文件中尝试了同样的方法,并且可以正常工作。因此,我认为ejs是错误的。
<html>
<head>
<title>To-do</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Candal|Chewy&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="todo-container">
<h2>To-do list</h2>
<div class="todo">
<form method="POST" action="/add" class="todo-header">
<input type="text" placeholder="What do you like to do?" name="item" required>
<button type="submit"><span class="fa fa-plus-circle"></span></button>
</form>
<ul class="todo-list">
<form>
<% for(var i = 0; i <tasks.length; i++){%>
<li class="todo-list-item">
<div class="todo-list-item-name"><%= tasks[i].item %></div>
<button type="submit" formaction="/remove/<%= tasks[i].id %>" formmethod="post"><i class="fas fa-trash"></i> </button>
<button type="submit" formaction="/edit/<%= tasks[i].id %>" formmethod="get"><i class="fas fa- edit"></i></button>
<button type="submit" formaction="/done/<%= tasks[i].id %>" formmethod="POST" id="done"><i class="fas fa-thumbs-up"></i></button>
</li>
<br>
<%} %>
</form>
</ul>
</div>
</div>
<script>
$("#done").click(function () {
console.log("I was here")
$(".todo-list-item ").toggleClass('ButtonClicked');
});
</script>
</body>
</html>
答案 0 :(得分:0)
我对代码进行了一些简化,但是我认为这是您想要的:
$(".done").click(function () {
$(".todo-list-item").toggleClass('ButtonClicked');
});
.ButtonClicked{
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<li class="todo-list-item">
<button class="test" type="submit"><i class="fas fa-trash"></i>btn</button>
<button class="test" type="submit"><i class="fas fa- edit"></i>btn</button>
<button class="test done" type="submit"><i class="fas fa-thumbs-up">btn</i></button>
</li>