Javascript 函数不加载CSS模式中js数据中的所有项

我的js脚本有问题。函数

portfolioThumb

完全起作用，因为我有所有的拇指，但我不知道为什么函数

portfoliotomodal

只从

portfolioData

加载第一个元素？我的模式是一个简单的CSS使用

：target

伪类。 当我不使用模态时，它工作得很好

我创建了文件“portfolio.js”，它看起来像这样：

const portfolioData  = [
        {
        title: "Example1",
        desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
        tech: "Axure, Photoshop, Illustrator ",
        photo: "images/example.png",
        thumb: "images/thumb1.png"
    },
    {
        title: "Example2",
        desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
        tech: "HTML5, Sass, CSS3, jQuery, Javascript",
        photo: "images/example.png",
        thumb: "images/thumb1.png"
    },
    {
        title: "Example3",
        desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
        tech: "Adobe After Effects, Adobe Premiere",
        photo: "images/example.png",
        thumb: "images/thumb1.png"
    }
    ];

      function portfolioThumb(portfolio) {
        return `
        <div class="project">
            <a class="btn" href="#open-modal"><img class="project-thumb" src="${portfolio.thumb}"></a>
        </div>`;
      }

      document.getElementById("portfolio").innerHTML = `
      ${portfolioData.map(portfolioThumb).join("")}`;

      function portfolioModal(modal) {
        return `
        <div>
            <a href="#projects" title="Close" class="modal-close">Close</a>
            <h1 class="project-title">${modal.title}</h1>
            <div class="project-desc">${modal.desc}</div>
            <img class="project-photo" src="${modal.photo}">
            <div class="project-desc">${modal.tech}</div>
        </div>`;
        }

        document.getElementById("open-modal").innerHTML = `
        ${portfolioData.map(portfolioModal).join("")}`;

const portfolioData=[
{
标题：“示例1”，
描述：“Lorem ipsum dolor et miset execut Lorem dausum dolor hamburgefonz odnit”，
技术：“Axure、Photoshop、Illustrator”，
照片：“images/example.png”，
拇指：“images/thumb1.png”
},
{
标题：“示例2”，
描述：“Lorem ipsum dolor et miset execut Lorem dausum dolor hamburgefonz odnit”，
技术：“HTML5、Sass、CSS3、jQuery、Javascript”，
照片：“images/example.png”，
拇指：“images/thumb1.png”
},
{
标题：“示例3”，
描述：“Lorem ipsum dolor et miset execut Lorem dausum dolor hamburgefonz odnit”，
技术：“Adobe After Effects，Adobe Premiere”，
照片：“images/example.png”，
拇指：“images/thumb1.png”
}
];
功能组合（投资组合）{
返回`
`;
}
document.getElementById（“公文包”）.innerHTML=`
${portfolioData.map（portfolioThumb.join（“”）}；
功能门叶模型（模态）{
返回`
${modal.title}
${modal.desc}
${modal.tech}
`;
}
document.getElementById（“打开模式”）.innerHTML=`
${portfolioData.map（portfolioModal.join（“”）}`；

和index.html的一部分

 <!-- PROJECTS -->
    <section id="projects">
        <div class="content">
          <div id="portfolio"></div>
          <div id="open-modal" class="modal-window"></div>
        </div>
    </section> 

是啊！我做到了！如果你有多个情态动词，你必须记住数字。我为const

portfolioData

中的数组和链接添加了

id

编号而且它工作正常！

您使用的是哪种浏览器……它在chrome 78中工作……请您再次检查一下……ShantanuSharma感谢您的回答。我在Safari、chrome和Firefox中进行了测试。仍然不工作。顺便说一句，如果重要的话，我使用了gulp js任务。