Блог

Главная - Вопросы по программированию - Мой код jquery не работает внутри шаблона ejs

Мой код jquery не работает внутри шаблона ejs

#javascript #html #jquery #ejs

#javascript #HTML #jquery ( jquery ) #ejs #jquery

Вопрос:

Вот мой шаблон 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|Chewyamp;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>

Комментарии:

1. Можете ли вы также опубликовать свой css? и, возможно, удалите ненужный код, чтобы сделать его более читаемым, и поместите его в фрагмент кода 🙂

2. .todo-list-item { padding: 10px; margin-top: 10px; border: none; border-radius: 5px; семейство шрифтов: ‘Candal’, без засечек; background: светло-серый; дисплей: гибкий; flex-направление: строка; } .buttonClicked { background-color: черный; }

3. Не забудьте проголосовать за полезные ответы и принять ответы, которые разрешают ваш вопрос. Это ничего вам не стоит и вознаграждает усилия, которые другие приложили, чтобы помочь вам.

Ответ №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>

Комментарии:

1. Я хочу, чтобы цвет менялся только тогда, когда они нажимают на кнопку «готово», и именно по этой причине я выбрал идентификатор для этой конкретной кнопки. Но почему-то мой код не весь попадает в эту часть скрипта. Какой бы код я ни написал, он правильный, потому что я тестировал внутри другого html-файла, и он работает нормально

2. итак, вам нужно изменить цвет фона, если вы нажмете кнопку «готово». Какой цвет фона необходимо изменить? кнопка или элемент списка?

3. Это цвет элемента списка, который необходимо изменить, и это мой код для него: $( «#done» ).click(function( ) { console.log(«Я был здесь») $(«.todo-list-item «).toggleClass(‘buttonClicked’); });

4. хм, единственное, что я вижу неправильно, это один пробел здесь: $(«.todo-list-item «). Но я не думаю, что это вызывает какие-либо проблемы.. Ваша страница обновляется или перенаправляется после нажатия кнопки «готово»?

5. Да, это так, потому что я делаю запрос post на done/:id, который обновит значение как «done» в базе данных. Вот почему я утешаю в своем теге script на стороне клиента, чтобы проверить, посещает он его или нет? в консоли моего браузера ничего не отображается, что сообщает мне, что мой jquery не выполняется .