如何用JavaScript动态生成Bootstrap卡片展示餐厅推荐结果？

原问题 #

我正基于用户在表单中输入的偏好，使用JavaScript结合Yelp Business Search与Google Maps API动态生成餐厅推荐列表。我希望将每个推荐结果放入Bootstrap卡片中，让页面布局更整洁规整，但未找到相关实现示例。以下是我当前生成推荐列表的代码，作为编程训练营新手，恳请获得相关实现指导：

function updateResults(data, userLocation) {
  const resultsContainer = document.getElementById("results-container");
  const mapContainer = document.getElementById("map-container");

  //clears any existing results from the container
  resultsContainer.innerHTML = "";
  // console.log(data)
  // console.log(userLocation)
  console.log(data.businesses.length)
  initMap(userLocation, mapContainer, data.businesses);

  //loop through the search results and create HTML elements for each one
  data.businesses.forEach(result => {
    const resultElement = document.createElement("div");

    const nameElement = document.createElement("h2");
    const nameLink = document.createElement("a");
    nameLink.href = result.url;
    nameLink.innerText = result.name;
    nameElement.appendChild(nameLink);

    const imageElement = document.createElement("img");
    imageElement.src = result.image_url;
    imageElement.src = result.image_url;
    imageElement.style.width = "100px";
    imageElement.style.height = "100px";
    imageElement.style.objectFit = "cover";

    const addressElement = document.createElement("p");
    addressElement.innerText = result.location.display_address.join(", ");

    const distanceElement = document.createElement("p");
    if (result.distance_data.distance){
      distanceElement.innerText = `${result.distance_data.distance.text} miles from your location`;
    }
    const durationElement = document.createElement("p");
    if (result.distance_data.duration){
    durationElement.innerText = `${result.distance_data.duration.text} minutes from your location`;
    }

    const priceElement = document.createElement("p");
    priceElement.innerText = result.price;

    const ratingElement = document.createElement("p");
    ratingElement.innerText = `${result.rating} stars`;


    resultElement.appendChild(nameElement);
    resultElement.appendChild(imageElement);
    resultElement.appendChild(addressElement);
    resultElement.appendChild(distanceElement);
    resultElement.appendChild(durationElement);
    resultElement.appendChild(priceElement);
    resultElement.appendChild(ratingElement);

实现方案 #

1. 先理清楚Bootstrap卡片的核心结构 #

Bootstrap卡片的标准层级为：

• card：外层容器，定义卡片基础样式
• card-img-top：卡片顶部的图片容器
• card-body：卡片内容区域（标题、文本等）
• card-title：卡片标题样式
• card-text：卡片文本内容样式

配合Bootstrap的网格系统（row+col），可以实现卡片的响应式排列。

2. 修改JavaScript代码生成卡片结构 #

直接重构原有代码，替换为Bootstrap卡片的元素结构，并添加对应的样式类：

function updateResults(data, userLocation) {
  const resultsContainer = document.getElementById("results-container");
  const mapContainer = document.getElementById("map-container");

  // 清空现有结果
  resultsContainer.innerHTML = "";
  console.log(data.businesses.length);
  initMap(userLocation, mapContainer, data.businesses);

  // 循环生成每个餐厅的Bootstrap卡片
  data.businesses.forEach(result => {
    // 创建卡片外层容器，添加间距和阴影增强视觉效果
    const card = document.createElement("div");
    card.classList.add("card", "mb-4", "shadow-sm");
    card.style.maxWidth = "350px"; // 可选：限制卡片最大宽度

    // 卡片顶部图片
    const cardImg = document.createElement("img");
    cardImg.classList.add("card-img-top");
    cardImg.src = result.image_url;
    cardImg.alt = `${result.name} 餐厅图片`;
    cardImg.style.height = "200px";
    cardImg.style.objectFit = "cover";

    // 卡片内容区域
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body");

    // 餐厅标题
    const title = document.createElement("h5");
    title.classList.add("card-title");
    const nameLink = document.createElement("a");
    nameLink.href = result.url;
    nameLink.innerText = result.name;
    nameLink.classList.add("text-decoration-none", "text-primary");
    title.appendChild(nameLink);

    // 餐厅地址
    const address = document.createElement("p");
    address.classList.add("card-text", "text-muted");
    address.innerText = result.location.display_address.join(", ");

    // 评分+价格行：用flex布局实现两端对齐
    const ratingPriceRow = document.createElement("div");
    ratingPriceRow.classList.add("d-flex", "justify-content-between", "align-items-center");

    const rating = document.createElement("span");
    rating.classList.add("badge", "bg-warning", "text-dark");
    rating.innerText = `${result.rating} ⭐`;

    const price = document.createElement("span");
    price.innerText = result.price || "未定价";

    ratingPriceRow.appendChild(rating);
    ratingPriceRow.appendChild(price);

    // 距离信息
    const distance = document.createElement("p");
    distance.classList.add("card-text", "small", "text-muted");
    if (result.distance_data?.distance) {
      distance.innerText = `${result.distance_data.distance.text} 距您当前位置`;
    }

    // 车程时长
    const duration = document.createElement("p");
    duration.classList.add("card-text", "small", "text-muted");
    if (result.distance_data?.duration) {
      duration.innerText = `${result.distance_data.duration.text} 车程`;
    }

    // 组装卡片内容
    cardBody.appendChild(title);
    cardBody.appendChild(address);
    cardBody.appendChild(ratingPriceRow);
    cardBody.appendChild(distance);
    cardBody.appendChild(duration);

    // 组装完整卡片
    card.appendChild(cardImg);
    card.appendChild(cardBody);

    // 将卡片添加到结果容器
    resultsContainer.appendChild(card);
  });
}

3. 优化页面容器的布局 #

在HTML中给results-container添加Bootstrap网格类，实现响应式排列：

<div id="results-container" class="row g-4"></div>

这样卡片会在大屏幕上自动排成3列，小屏幕自动堆叠，适配移动端。

关键修改说明 #

• 用classList.add()添加Bootstrap样式类，替代内联样式，符合框架规范
• 重构元素结构，严格对应Bootstrap卡片的层级
• 加入阴影、间距、文本颜色等细节优化，提升视觉体验
• 使用可选链操作符?.简化条件判断，避免空值报错
• 用Flex布局实现评分和价格的横向对齐，让布局更整洁

内容的提问来源于stack exchange，提问作者Audrey Mondragon