我想使用JavaScript数组打开动态页面

Question

我正在使用 JavaScript 使用数组创建 html 动态页面。现在我想添加一个功能，一旦我单击博客文章，它就会将我带到一个新的动态页面，该页面应包含该特定数组的子级。可以吗？

如何创建动态页面以及如何显示我想要在页面上显示的确切目标数组项以及如何使用该数组进行迭代。我脑子里有很多问题。另外，它是否会使渲染速度更快或有助于提高网站速度？

这是代码供您参考。任何帮助将不胜感激，因为我已经阅读了各种文档、视频等，但没有相关的内容。

这是一个博客文章网站，我们可以在其中动态创建和显示博客。

<section class="mainsection darkbg">
  <h1 class="somewhatlargefont width100 margintop20 accentfont mainfont">Our Blog</h1>
  <div class="blogrow margintop20" id="servicelist">
  </div>
</section>

这是我正在使用的数组：

let dataarr = [
  {
    id: 1,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
  {
    id: 2,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
  {
    id: 3,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
  {
    id: 4,
    img: "images/analysis.jpg",
    date: "16/10/2023",
    createdby: "Atin pal",
    blogname: "How IT is changing the world",
    blogdetails:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam neque, eum rem saepe, suscipit natus nisi optio voluptates beatae necessitatibus excepturi incidunt delectus dolores. Id neque in ex blanditiis, inventore fugit modi voluptatum ipsam error ut iste adipisci maiores soluta qui repudiandae excepturi mollitia officiis reiciendis incidunt nam distinctio fuga.",
  },
];

这是 JavaScript 代码：

let services = document.getElementById("servicelist");

dataarr.forEach((list) => {
  const maindiv = document.createElement("div");
  const blogimg = document.createElement("img");
  const secondarydiv = document.createElement("div");
  const serviceTitle = document.createElement("h1");
  const serviceDet = document.createElement("p");
  const readmorecont = document.createElement("div");
  const readmoretxt = document.createElement("p");

  services.append(maindiv);
  maindiv.append(secondarydiv);
  secondarydiv.append(serviceTitle);
  secondarydiv.append(serviceDet);
  maindiv.append(readmorecont);
  readmorecont.append(readmoretxt);
  serviceTitle.innerHTML = list.blogname;
  serviceDet.innerHTML = list.blogdetails;
  readmoretxt.innerHTML = "Read More";
  maindiv.setAttribute("class", "servicecard shadowed");
  blogimg.setAttribute("class", "blogimg");
  serviceDet.setAttribute("class", "centertext, iconlight");
  readmorecont.setAttribute("class", "buttonmain width100");
  secondarydiv.setAttribute("class", "blogsecondarydiv");
  serviceDet.setAttribute("class", "margintop20");
});

Answer 1

使用 url 参数的直接解决方案 ID 之一，您可以将每个博客 div 更改为链接

而不是这个：

const maindiv = document.createElement("div");

将其更改为

const maindiv = document.createElement("a");

此行之后：

const readmoretxt = document.createElement("p");

您可以为链接网址创建新变量，例如

const pageLink = http://example.com/blog.html?blogName=${list.blogname}&blogDetails=${list.blogdetails} ... and so on

在 blog.html 文件中，您可以获取这些 url 参数并显示它们。