为什么第一次点击后，我需要点击两次才能反转
所以我的问题是，当我点击一个radiobutton来添加类“Completed”时，它执行了所要执行的操作，但是当我想要移除它时，我需要点击两次，我不知道为什么。如有任何帮助，我们将不胜感激。谢谢
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');
};
});
}
共有1个答案
可以尝试像w3schools中所示的那样使用toggleClass()，而不是使用if语句。看看能不能修好它。
-
我的问题是，我的活动中的按钮需要单击两次，以使代码执行用onClick方法编写的代码。当我共享我的活动代码和布局文件代码时。请引导我解决这个问题。 活动（片段） 布局文件 而此片段正在另一个主要活动中初始化。
-
我在另一个中有一个。我注意到，为了使嵌套的滚动视图开始滚动，我必须点击两次。 我尝试使用一些属性，如、和，但这些都没有帮助。 我不能提供任何真实的代码，因为项目相当大，在滚动视图之间有多个组件。但是，基本结构与此类似：
-
我正在尝试在React中构建我的第一个计算器。我的纽扣似乎有问题（我想）。在测试s时，我发现我第一次点击添加按钮不会更新所有setState。相反，第二次单击会正确更新它。 知道它为什么不起作用吗？ 我有一个名为“DaInserting”的div，当用户点击任何数字键时会更新，然后当用户点击加法/减法/等时，应该更新，但它没有。它在第二次点击时更新：-检查。 当用户点击加法/减法后，DaInser
-
我正在设计一个网站，在导航我有2个链接有下拉菜单（“关于”和“服务”）。当你将鼠标悬停在链接上时，下拉菜单就会出现，然后当你点击链接时，下拉菜单就会消失，然后如果你再点击它，下拉菜单就会再次出现。所以基本上，为了进入那个页面，你必须三次点击链接。有没有人知道我可以做什么来改变这个，这样你就可以在点击一次后进入页面？ 这是导航在我的HTML代码中的样子： 以下是相关的CSS： 编辑：我发现下拉菜单是
-
背景：试图在一个页面站点上为移动设备构建一个全屏菜单。 问题：需要单击#handle div两次才能执行操作。我尝试过以不同的方式使用follows，但我似乎在某些方面实现错误：live/die、bind/unbind、on/off、delegate/Undelegate。 我不明白我该如何解决我的问题。很抱歉在一些Divs上出现了错误的ID名。 HTML Jquery点击li时，用户将向下滚动页
-
在ElementPlus UI 中el-popover中内容循环出来的点击事件需要点击第二次才能触发？ 代码如下 for循环出来的li点击需要第二次才触发 不是循环的点击一次就行 补充(点击事件放在li上也不行，所以我才委托到UL上的)