时间戳

首页 > 解决方案 > 如何获取“this”以从我单击的 div 中获取信息

javascript - 如何获取“this”以从我单击的 div 中获取信息

问题描述

我正在制作一个博客站点，该站点通过数据库进行映射，并制作带有一些博客信息的卡片。每张卡片都有一个动态填充的“阅读更多”按钮。我希望 onclick 事件成为包含所有博客数据的模式。我很确定我需要使用“this”关键字来让它工作，但我也愿意接受其他建议。 

dataCall();

async function dataCall() {
  try {
    const res = await fetch("/api/blog");
    const data = await res.json();

    for (info of data) {
      const root = document.createElement("div");
      const title = document.createElement("h3");
      const snip = document.createElement("div");

      root.className = "blog-item";
      title.className = "title m-3";
      snip.className = "snip";

      title.textContent = info.title;
      snip.textContent = info.blog;

      const btn = document.createElement("a");
      btn.className = "btn btn-light m-3 read-more";
      btn.id = "read-more";
      btn.textContent = "Read More";

      document.getElementById("blogs").append(root);
      root.append(title, snip, btn);

      const readMore = document.getElementsByClassName("read-more");
      for (let i = 0; i < readMore.length; i++) {
        readMore[i].addEventListener("click", blogModal);
      }
    }
  } catch (err) {
    console.log(err);
  }
}

const blogModal = () => {
  console.log(this); // How can I get the blog data to appear here? 

};

我努力了

console.log(this.info)

但它只从最后一个博客中提取数据，而不是点击的博客的信息。

谢谢您的帮助！！

标签： javascripthtmlthisblogs

解决方案

您不需要使用this，只需将数据传递给模态即可。喜欢：

readMore[i].addEventListener("click", () => blogModal(info));

对于模态：

const blogModal = info => {
  console.log(info); 
};

我希望这有帮助！

推荐阅读