我已经在我的待办事项列表项目的 JS 代码中编写了 fadeOut 命令，但是淡出无法正常工作并且在 google 控制台中显示错误？

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>

我已经在我的待办事项列表项目的 JS 代码中编写了 fadeOut 命令，但是淡出无法正常工作并且在 google 控制台中显示错误？

I have written fadeOut command in my JS code, in my to do list project but the fadeout is not working properly and showing error in google console?

javascript

jquery

fadeout

web-frontend

web-developer-toolbar