如何用JavaScript将JSON文件中的URL设为HTML按钮的链接

已完成网站食谱展示功能的基础开发，通过JSON数据源成功渲染了食谱的标题、描述、食材和缩略图，但不知道怎么修改现有JS代码，把JSON对象里的url字段值设置到HTML模板中“Make it yourself”按钮（标签）的href属性上。

相关代码片段 #

JSON数据源片段

[
  {
    "postid": "3",
    "title": "Pizza",
    "text": "some text to explain the recept in short",
    "img": "../assets/images/recipes-thumbnail/pizza.png",
    "ingredients": "flour, yeast, water, salt, honey, olive oil",
    "url": "../pages/pizza.html"
  }
]

HTML模板

<!--  Card  -->
<div class="user-cards" data-post-cards-container data-aos="zoom-in" data-aos-delay="100"></div>

<template data-post-template>
  <div id="card-container" class="container">
    <div class="card">
      <div class="card-image_2">
        <div class="photo" data-photo></div>
      </div>

      <div class="card-data">
        <h3 class="header" data-header></h3>
        <p class="body" data-body></p>
        <p class="ingre" data-ingre></p>

        <!-- 目标按钮 -->
        <a href="#" class="card-button" data-link>Make it yourself</a>

      </div>
    </div>
  </div>
</template>
<!--  End Card  -->

现有JavaScript代码

fetch("../jsn/posts-main.json")
  .then(res => res.json())
  .then(data => {
    posts = data.map(post => {
      const card = postCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      const ingre = card.querySelector("[data-ingre]")
      const img = card.querySelector("[data-photo]")

      header.textContent = post.title
      body.textContent = post.text
      ingre.textContent = post.ingredients

      const imgContent = document.createElement('img');
      imgContent.src = post.img;
      img.appendChild(imgContent);

      postCardContainer.append(card)
      return {
        title: post.title,
        ingre: post.ingredients,
        element: card
      }
    })
})

解决方案 #

只需要在现有JS代码中添加两步操作：

1. 选中模板中带有data-link属性的标签元素
2. 将JSON对象的url字段值赋值给该元素的href属性

fetch("../jsn/posts-main.json")
  .then(res => res.json())
  .then(data => {
    posts = data.map(post => {
      const card = postCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      const ingre = card.querySelector("[data-ingre]")
      const img = card.querySelector("[data-photo]")
      // 新增：选中按钮元素
      const linkBtn = card.querySelector("[data-link]")

      header.textContent = post.title
      body.textContent = post.text
      ingre.textContent = post.ingredients
      // 新增：绑定url到href属性
      linkBtn.href = post.url

      const imgContent = document.createElement('img');
      imgContent.src = post.img;
      img.appendChild(imgContent);

      postCardContainer.append(card)
      return {
        title: post.title,
        ingre: post.ingredients,
        element: card,
        // 可选：将url也加入返回对象，方便后续可能的操作
        url: post.url
      }
    })
})

说明 #

• 通过card.querySelector("[data-link]")精准定位到模板中的按钮，避免类名变更导致的失效问题
• 直接给元素的href属性赋值post.url，就能替换掉默认的#链接
• 可选：如果后续需要对这个链接做其他操作，可以把url也加入返回的对象中

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