Todo列表新增功能Bug求助：添加待办项出现空白间隔

数据老陈

2026-5-6

解决Todo列表添加时的空白间隔问题

嘿，我一眼就揪出问题啦！你碰到的交替空白间隔，根源是添加新待办项的JS代码里HTML标签闭合写错了。

问题分析

看你JS代码里的这一行核心代码：

$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")

最后你写的是<li>而不是闭合标签</li>——浏览器会自动补全闭合逻辑，但同时会多生成一个空的<li>元素，这个空li就是造成交替空白间隔的罪魁祸首！

修复方案

只需要把append语句末尾的<li>改成</li>就搞定了，修正后的完整JS代码如下：

$("ul").on("click", "li", function(){ $(this).toggleClass("completed"); });
$("ul").on("click","span",function(event){ 
  $(this).parent().fadeOut(500,function(){ 
    $(this).remove(); 
  }); 
  event.stopPropagation(); 
});
$("input[type='text']").keypress(function(event){ 
  if(event.which === 13) { 
    var todosText=$(this).val(); 
    $(this).val(""); 
    $("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "</li>") 
  } 
});
$(".fa-pencil-square").click(function(){ $("input[type='text']").fadeToggle(); });