求助：jQuery实现待办列表无任务时显示提示文本

嘿，别着急，这种小问题其实挺常见的，我来给你几个可行的方案～

核心思路很简单：我们需要在三个关键节点检查待办列表的状态——页面初始加载时、每次添加任务后、每次删除任务后，根据列表是否有任务项来控制提示信息的显示或隐藏。

方案一：固定提示元素，通过显隐控制 #

这种方法适合提前把提示元素写在HTML里，后续只需要切换它的显示状态就好，逻辑清晰。

首先是HTML结构：

<div class="to-do">
  <ul id="taskList">
    <!-- 初始显示的空状态提示 -->
    <li class="empty-message">you have no tasks</li>
  </ul>
  <input type="text" id="taskInput" placeholder="输入任务内容">
  <button id="addTask">add task</button>
</div>

然后是jQuery代码：

$(document).ready(function() {
  // 添加任务的点击事件
  $('#addTask').click(function() {
    const taskText = $('#taskInput').val().trim();
    // 可选：校验输入是否为空，避免添加无效任务
    if (!taskText) return;
    
    // 隐藏空状态提示
    $('.empty-message').hide();
    // 追加新任务项，同时带上删除按钮
    $('#taskList').append(`<li>${taskText} <button class="deleteTask">Delete</button></li>`);
    // 清空输入框
    $('#taskInput').val('');
  });

  // 删除任务的事件委托（动态添加的元素需要绑定到父元素）
  $('#taskList').on('click', '.deleteTask', function() {
    // 删除当前点击的任务项
    $(this).parent().remove();
    // 删除后检查列表状态
    checkEmptyState();
  });

  // 通用的空状态检查函数
  function checkEmptyState() {
    // 统计除了提示元素之外的任务项数量
    const taskCount = $('#taskList li:not(.empty-message)').length;
    if (taskCount === 0) {
      // 没有任务时显示提示
      $('.empty-message').show();
    }
  }
});

可以给提示加个样式区分正常任务：

.empty-message {
  color: #999;
  font-style: italic;
}

方案二：动态插入/移除提示元素 #

如果不想提前写提示元素，可以用这种方法，动态判断列表是否为空，再决定是否插入提示。

HTML结构更简洁：

<div class="to-do">
  <ul id="taskList"></ul>
  <input type="text" id="taskInput" placeholder="输入任务内容">
  <button id="addTask">add task</button>
</div>

jQuery代码：

$(document).ready(function() {
  // 页面加载时先检查一次状态
  checkEmptyState();

  $('#addTask').click(function() {
    const taskText = $('#taskInput').val().trim();
    if (!taskText) return;
    
    // 先移除可能存在的空提示
    $('#taskList .empty-message').remove();
    // 追加新任务
    $('#taskList').append(`<li>${taskText} <button class="deleteTask">Delete</button></li>`);
    $('#taskInput').val('');
  });

  $('#taskList').on('click', '.deleteTask', function() {
    $(this).parent().remove();
    checkEmptyState();
  });

  function checkEmptyState() {
    // 使用jQuery的:empty选择器判断列表是否为空
    if ($('#taskList').is(':empty')) {
      // 为空则插入提示元素
      $('#taskList').append('<li class="empty-message">you have no tasks</li>');
    }
  }
});

关键注意点 #

• 记得用事件委托绑定删除按钮的点击事件，因为删除按钮是动态添加到页面的，直接绑定click事件会失效。
• 输入校验可以根据需求调整，比如允许添加空格以外的空内容等。

这样调整后，你的待办列表就能在没有任务时正常显示提示啦～

内容的提问来源于stack exchange，提问作者Dan Williams