Question

这是我的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>

Answer 1

我对代码进行了一些简化，但是我认为这是您想要的：

$(".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>

我的jquery代码在ejs模板中不起作用

1 个答案: