时间戳

首页 > 解决方案 > 如何在 jQuery 中的 addClass 和 removeClass 之间切换？

javascript - 如何在 jQuery 中的 addClass 和 removeClass 之间切换？

问题描述

将类添加到 OBJ 后，我不知道如何删除类。例如，我单击一个列表项以赋予它“完成”类，但是当我再次单击它时，我需要知道如何删除“完成”类。希望你明白。

<body>
    <h1>To-Do List</h1>
    
    <div>
      <form autocomplete="off">
        <input type="text" id="todo" required autofocus>
        <input type = "submit">
      </form>
      <button onclick="deleteAll()">Delete All</button>
    </div>
    <ol class="taskList">
    </ol>
  
    <script>
    function addTask(event){
        event.preventDefault();
        var task = $("#todo").val();
        $(".taskList").append("<li>"+task+"<div class='deleteIcon'>x</div></li>");
        $("#todo").val("");
        $("li").click(complete);
        $(".deleteIcon").click(deleteItem);
    }
    $("form").submit(addTask);
    $(".taskList").sortable();
      
    function complete(){
        $(this).addClass("complete");
    }
    function deleteItem(){
        $(this).parent().remove();
    }
    function deleteAll(){
        $('li').each(function(){
            $('li').remove();
        });
    }
    </script>

标签： javascripthtmljquery

解决方案

我将以不同的方式创建元素 li 以便我们以后可以使用它，因为我用这个元素创建了变量 li 然后将这一行更改$('li').click(complete)为：$(li).click(complete)

function addTask(event){
        event.preventDefault();
        var task = $("#todo").val();
        let li = $("<li>"+task+"<div class='deleteIcon'>x</div></li>") // new element li
        $(".taskList").append(li);
        $("#todo").val("");
        li.click(complete); // call this li
        $(".deleteIcon").click(deleteItem);
    }
    $("form").submit(addTask);
    // $(".taskList").sortable();
      
    function complete(){
        $(this).toggleClass("complete");
    }
    function deleteItem(){
        $(this).parent().remove();
    }
    function deleteAll(){
        $('li').each(function(){
            $('li').remove();
        });
    }
.complete {
  background: #f00;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>To-Do List</h1>
    
    <div>
      <form autocomplete="off">
        <input type="text" id="todo" required autofocus>
        <input type = "submit">
      </form>
      <button onclick="deleteAll()">Delete All</button>
    </div>
    <ol class="taskList">
    </ol>

我创建了一个示例，通过添加要完成的样式来证明它在此处正常工作。创建项目并在此处进行测试，您将看到这些项目将交替您的“完整”课程

推荐阅读