Question

所以我的问题是，当我单击单选按钮添加“已完成”类时，它会执行应该执行的操作，但是当我想删除它时，我需要单击两次，我不这样做不知道为什么。任何帮助，将不胜感激。谢谢

<块引用>

html

<!DOCTYPE html>
<html>
<head>
  <title>Todo App</title>
  <link rel="stylesheet" type="text/css" href="TodoApp.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- ------ Meta Tags ------ -->
</head>
<body>
  <div id="container">
    <div id="topImage">
      <h1 id="topImage-title">T O D O</h1>
      <img onclick="test()" id="moon" src="images/icon-moon.svg">
      <img src="images/bg-mobile-light.jpg" width="100%" height="100%">  
    </div>

    <div class="newToDo">
      <input onclick="addTask()" id="ready" type="radio" name="ready">
      <input type="text" name="todoTask" id="todoTask" placeholder="Create a new todo...">
    </div>

    <div id="tasksBox">
      <div class="newTasks">
        <input onclick="completeTask()" type="radio" class="bttComplete" name="bttComplete">
        <span>Complete Online Javascript Course</span>
        <div onclick="deleteTask()" class="delete"></div>
      </div>
    </div>
  </div>

  <script src="jquery_library/jquery-3.5.1.min.js"></script>
  <script src="TodoApp.js"></script>
</body>
</html>

<块引用>

css

.completed{
    background-image: url(images/icon-check.svg);
    background-position: center;
    background-repeat: no-repeat;
}

<块引用>

javascript

function completeTask(){ 
  $(".newTasks").click(function(){
    if ($(this).children().hasClass('completed')){
      $(this).children().removeClass('completed');
    } else {
      $(this).children().addClass('completed');
    };
  });
}

为什么第一次点击后，我需要点击两次才能反转

0 个答案: