javascript - 我在我的 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>