如何实现单条待办事项对应单个Bootstrap卡片展示？

云上老周

2026-8-6

解决方案

要实现一条待办事项对应一张Bootstrap卡片，核心是把单条待办的内容包裹在完整的Bootstrap卡片结构中，而非往同一个卡片里追加内容。具体修改如下：

1. 修改HTML结构

将原来的单个卡片，替换成一个用于承载所有待办卡片的容器：

<!-- 卡片容器，用于存放所有待办卡片 -->
<div id="todo-container" class="row g-3 p-3"></div>

2. 修正AJAX代码

在循环中，为每条待办生成完整的Bootstrap卡片HTML，再追加到容器中（同时修复原代码的标签闭合错误）：

var data = JSON.parse(httpRequest2.response);
console.log(data);
$.each(data, function(index, itemData) {
  // 为单条待办生成完整的Bootstrap卡片结构
  var cardHtml = `
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="row align-items-center">
            <div class="col-9">
              <p class="card-text mb-0">${itemData.Todo.task}</p>
            </div>
            <div class="col-3 text-end">
              <p class="card-text">${itemData.yourActualDataKey}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
  // 将生成的卡片添加到容器中
  $("#todo-container").append(cardHtml);
});