我在我的 JS 代码中编写了 fadeOut 命令，在我的待办事项列表项目中，但是淡出不能正常工作并在谷歌控制台中显示错误？

Question

$("ul").on("click", "li", function(){
    $(this).toggleClass("completed");
});

//Deleting the todos: 
$("ul").on("click", "span", function(event){
    $(this).parent().fadeout(500,function(event){
        $(this).remove();
    });
    event.stopPropagation();
});

// Creating new todos

$("input[type='text']").keypress(function(event){
    if(event.which === 13){
        var todoText = $(this).val();
        $(this).val("");

        $("ul").append("<li><span>X </span>"+ todoText +"</li>");
    }
})

当我单击 span 元素以淡出任务时，它在控制台中显示错误。 我附上了它显示的错误图片！

Answer 1

fadeOut 中的错字，您应该将父级缓存在汽车中以确保具有预期的“this”

 $("ul").on("click", "li", function() { $(this).toggleClass("completed"); }); //Deleting the todos: $("ul").on("click", "span", function(e) { e.stopPropagation(); const $parent = $(this).closest("li"); $parent.fadeOut(500, function(event) { $parent.remove(); }); }); // Creating new todos $("input[type='text']").keypress(function(event) { if (event.which === 13) { var todoText = $(this).val(); $(this).val(""); $("ul").append("<li><span>X </span>" + todoText + "</li>"); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" /> <ul> </ul>