在 jquery 中查找前一個元素

Question

剛開始學習編程，第一次來這里。

我嘗試了一個待辦事項列表

    <h1>ToDo List</h1>
    <div id="cont">
        <input type="text" id="task_todo" placeholder="Add a task">
        <button type="button" id="add" onclick="add_task()">Add task</button>
    </div>
    <p id="att">No task add</p>
    <div id="todo_list"></div>
    <button id="clear_all">Clear all tasks</button>


function add_task(){
    var x=$("#task_todo").val();
    if (x==""){
        $("#att").fadeIn(1000).show(3000).fadeOut(1000);
    } else {

        $("#clear_all").show();
        
        var dv=document.createElement("div");
            dv.setAttribute("class","task");   
        var inp=document.createElement("input");
            inp.setAttribute("type","text");
            inp.setAttribute("class","in in_red");
            inp.value=x;
        var img_check=document.createElement("img");
            img_check.setAttribute("class", "check");
            img_check.setAttribute("src","images/check.png")
        var img_delete=document.createElement("img");
            img_delete.setAttribute("class", "delete");
            img_delete.setAttribute("src","images/delete.png");
        dv.appendChild(inp);
        dv.appendChild(img_check);
        dv.appendChild(img_delete);
        document.getElementById("todo_list").appendChild(dv);
        
        $(".check").click(function(){
            $(this).prev().toggleClass("in_green");
        })

        $(".delete").click(function(){
            $(this).parent().remove();
            if($(`#todo_list`).is(`:empty`)) 
                $("#clear_all").hide();
        })

        $("#clear_all").click(function(){
            $(".task").remove();
            $("#clear_all").hide();
        })

        $("#task_todo").val("");
    }   
}

我的問題：

• 添加任務，按鈕“檢查”工作，更改“輸入”字段顏色
• 添加第二個任務，按鈕“檢查”用於任務 2，而不是任務 1
• 添加第三個任務，按鈕“檢查”用於任務 3 和 1，不適用於任務 2

也許你能幫助我，謝謝！

對於 Franci：對於添加的每個任務，“檢查”按鈕會更改輸入字段（任務內容）的顏色，如果任務已完成，則從紅色變為綠色>抱歉，如果我不是很清楚，感謝您的關注。

Answer 1

問題是您正在將點擊處理程序分配給所有匹配的元素：

$(".check").click(...

所以在第一個 append 之后，這會向第一個按鈕添加一個點擊事件 - 但在第二個 append 之后，它將它添加到第一個和第二個按鈕。 因此，單擊第一個按鈕會運行它兩次（因為它已經存在於第一個追加中） - 因為它是一個.toggle() ，它有效地撤消了它所做的事情，所以似乎什么也沒做。

第三個 append 相同——第一個按鈕現在有三個事件處理程序，所以現在似乎可以工作，而第二個按鈕有兩個事件處理程序，所以似乎不起作用。

您有 2 個選項：向事件處理程序添加上下文：

$(".check", dv).click(...

或者，使用事件委托：

$(document).on("click", ".check", function() {

您已經在使用this ，它將繼續為事件委托工作。

請注意，通過事件委托，您將事件處理程序設置一次（在任何其他事件之外），因此將位於與您的 append 代碼不同的位置。