基于JSON文件的博客文章生成及HTML跳转异常问题（JavaScript）

看起来你已经把搜索、数据渲染这些核心功能都搞定了，问题就出在没有在模板批量克隆的阶段，给每篇文章的<a>标签单独设置对应的pagearticle跳转地址。你之前用id定位的方式只能生效一次，因为页面里的id是唯一的，批量生成的卡片没法重复复用同一个id。

下面是具体的解决步骤和修改后的代码：

关键修改思路 #

在遍历JSON数据生成卡片的过程中，直接操作当前克隆出来的<a>标签（也就是代码里的card变量，因为你的模板根元素就是<a>），给它设置href属性为当前文章的pagearticle值即可。

修改后的完整JavaScript代码 #

const articlesTemplate = document.querySelector("[articles-template]")
const articlesContainer = document.querySelector("[data-articles-container]")
const searchInput = document.querySelector("[data-search]")
let articles = []

searchInput.addEventListener("input", e => {
 const value = e.target.value.toLowerCase()
 articles.forEach(article => {
  // 修正搜索匹配字段：你的JSON里没有name/email，改成标题和作者
  const isVisible = article.titre.toLowerCase().includes(value) || article.auteur.toLowerCase().includes(value)
  article.element.classList.toggle("hide", !isVisible)
 })
})

fetch("article.json")
 .then(res => res.json())
 .then(data => {
  articles = data.map(article => {
   // 克隆模板，card就是当前文章的<a>标签
   const card = articlesTemplate.content.cloneNode(true).children[0]
   // 核心：给当前a标签设置对应的跳转链接
   card.href = article.pagearticle

   const tag = card.querySelector("[data-tag]")
   const titre = card.querySelector("[data-titre]")
   const description = card.querySelector("[data-description]")
   const auteur = card.querySelector("[data-auteur]")
   const datearticle = card.querySelector("[data-datearticle]")
   
   tag.textContent = article.tag
   titre.textContent = article.titre
   description.textContent = article.description
   auteur.textContent = article.auteur
   datearticle.textContent = article.datearticle

   const imagearticlesrc = card.querySelector("[data-imagearticle]")
   imagearticlesrc.src = article.image;
   const imageauteursrc = card.querySelector("[data-imageauteur]")
   imageauteursrc.src = article.auteurimage;

   articlesContainer.append(card)

   return {
    image: article.image,
    tag: article.tag,
    titre: article.titre,
    description: article.description,
    auteurimage: article.auteurimage,
    auteur: article.auteur,
    datearticle: article.datearticle,
    pagearticle: article.pagearticle, // 把跳转地址也存入对象，方便后续扩展
    element: card
   }
  })
 })

为什么之前的方法失效？ #

你之前用document.getElementById("link")的方式，页面中只能存在一个id="link"的元素，JS只会找到第一个匹配的元素并设置href，后续生成的卡片虽然也有这个id，但不会被JS识别到，所以它们的href始终是空的。

而通过模板克隆时直接操作当前的card（每个独立的<a>标签实例），就能给每篇文章的跳转链接单独赋值，完美适配批量生成的场景。

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