jQuery中的addClass和removeClass如何切換？

Question

在將 class 添加到 OBJ 后，我不知道如何刪除類。 例如，我單擊一個列表項以使其 class “完成”，但是當我再次單擊它時，我需要知道如何刪除 class “完成”。 希望你明白。

<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>

Answer 1

我將以不同的方式創建元素 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>

我創建了一個示例，通過添加要完成的樣式來證明它在此處正常工作。 創建項目並在此處進行測試，您將看到這些項目將交替您的“完整” class

Answer 2

您應該使用的方法是：

  $(this).toggleClass("complete");

代替：

  $(this).addClass("complete");

toggleClass() 切換添加或刪除 class，而 addClass() 只是添加它。

jQuery中的addClass和removeClass如何切換？

問題描述

2 個解決方案

解決方案1
1 已采納 2020-07-04 20:35:09

解決方案2
0 2020-07-04 19:25:45

jQuery中的addClass和removeClass如何切換？

問題描述

2 個解決方案

解決方案1 1 已采納 2020-07-04 20:35:09

解決方案2 0 2020-07-04 19:25:45

解決方案1
1 已采納 2020-07-04 20:35:09

解決方案2
0 2020-07-04 19:25:45