函数未从 CSS 模态中的 js 数据加载所有项目

Posted 2023-05-08

【中文标题】函数未从 CSS 模态中的 js 数据加载所有项目

【英文标题】：Function not load all items from js data in CSS modal

【发布时间】：2020-03-18 12:39:50

【问题描述】：

我的 js 脚本有问题。函数portfolioThumb 工作正是因为我有所有的拇指，但我不知道为什么函数portfolioModal 只加载来自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("")`;

和index.html的一部分

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

【问题讨论】：

您使用的是哪个浏览器......并且它在 chrome 78 中工作，请您再检查一下......

@ShantanuSharma 谢谢你的回答。我在 Safari、Chrome 和 Firefox 中进行了测试。还是行不通。顺便提一句。如果它很重要，我会使用 gulp js 任务。

【参考方案1】：

是的！我做到了！如果您有多个模态，则必须记住数字。我在 const portfolioData 和链接 a href="open-modal-$portfolio.id 中为数组添加了 id 数字，它可以正常工作！