如何将 EJS 元素放入 html 行的 onclick="",

Question

所以我正在创建一个简单的项目画廊，为此我遵循了 W3schools 教程制作照片画廊并将其转换为我的需要。然而，在那个教程中，项目的数量是预定义的，对于我来说，它使用 Nodejs 和东西连接到 MongoDB。原始教程遵循此 html 方案：

<div class="section-projects-main-container">

            <!-- Full-width images with number text -->
            <div class="section-projects-project-container">
                <div class="section-projects-project-title">Great Tree 1</div>
                <div class="section-projects-project-date">21<span id="slashs">/</span>69<span id="slashs">/</span>4200</div>
                <img class="section-projects-project-img" src="tree.jfif">
                <div class="section-projects-project-description">This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool. This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool.</div>
                <button class="section-projects-project-btn">Learn More</button>
            </div>
        
            <div class="section-projects-project-container">
                <div class="section-projects-project-title">Great Tree 2</div>
                <div class="section-projects-project-date">21/21/21</div>
                <img class="section-projects-project-img" src="tree2.jfif">
                <div class="section-projects-project-description">This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool. This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool.</div>

            </div>
        
        
            <!-- Next and previous buttons -->
            <a class="section-projects-btn-prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="section-projects-btn-next" onclick="plusSlides(1)">&#10095;</a>
        

            <!-- Thumbnail images -->
            <div class="section-projects-thumbnail-mtitle">Other Projects</div>
            
            <div class="section-projects-thumbnail-row">
                <div class="section-projects-thumbnail-col" >
                    <img class="section-projects-thumbnail-img cursor" src="tree.jfif" onclick="currentSlide(1)"  alt="The Woods">
                    <h3 class="section-projects-thumbnail-title">Project Title 1</h3>
                    <h4 class="section-projects-thumbnail-date">21/69/4300</h4>
                </div>
                <div class="section-projects-thumbnail-col">
                    <img class="section-projects-thumbnail-img cursor" src="tree2.jfif"  onclick="currentSlide(8)" alt="Cinque Terre">
                    <h3 class="section-projects-thumbnail-title">Project Title 2</h3>
                    <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
                </div>
            </div>
        </div>

并且使用的 JS 是：

var slideIndex = 1;
            showSlides(slideIndex);

            // Next/previous controls
            function plusSlides(n) {
                showSlides(slideIndex += n);
            }

            // Thumbnail image controls
            function currentSlide(n = id) {
                showSlides(slideIndex = id);
            }

            function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("section-projects-project-container");
                var column = document.getElementsByClassName("section-projects-thumbnail-col");
                var dots = document.getElementsByClassName("section-projects-thumbnail-img");

                if (n > slides.length) {slideIndex = 1}
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                    column[i].className = column[i].className.replace(" active", "");
                    column[i].style.display = "inline-block";
                }

                slides[slideIndex-1].style.display = "inline-flex";
                column[slideIndex-1].className += " active";
                column[slideIndex-1].style.display = "none";
            }

所以 onclick 被传递到每个缩略图的 <img> 中，缩略图的具体顺序被列在它的参数中 currentSlide(n).

现在使用 EJS，html 是这样的：

<div class="section-projects-main-container">
                <% projectdetails.forEach(project => { %>
                    <!-- Full-width images with number text -->
                    <div class="section-projects-project-container">
                        <div class="section-projects-project-title"><%= project.projectName %></div>
                        <div class="section-projects-project-date"><%= project.projectDate %></div>
                        <img class="section-projects-project-img" src="data:<%=project.img.contentType%>;base64,<%=project.img.data.toString('base64')%>">
                        <div class="section-projects-project-description"><%= project.projectDescription %></div>
                        <button class="section-projects-project-btn">Learn More</button>
                    </div>
                <% }) %>   
            
            <!-- Next and previous buttons -->

            <a class="section-projects-btn-prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="section-projects-btn-next" onclick="plusSlides(1)">&#10095;</a>
        

            <!--Thumbnail images--> 
            <div class="section-projects-thumbnail-mtitle">Other Projects</div>
            
            <div class="section-projects-thumbnail-row">
                <% projectdetails.forEach(item => { %>
                    <div class="section-projects-thumbnail-col" >
                        <img class="section-projects-thumbnail-img cursor" src="data:<%=item.img.contentType%>;base64,<%=item.img.data.toString('base64')%>" onclick="currentSlide()"  alt="The Woods">
                        <h3 class="section-projects-thumbnail-title"><%= item.projectName %></h3>
                        <h4 class="section-projects-thumbnail-date"><%= item.projectDate %></h4>
                    </div>
                <% }) %> 
            </div> 
        </div>

但是我不确定如何将每个项目的_id传递给缩略图onclick函数。我尝试将 _id 发送到 html <div id="hiddendiv" style="color: white; display: none; position: relative;"><%=project.id %></div> 中，然后通过 JS 和运行函数本身检索此值。但这不能正常工作。

有什么解决办法吗？如果不是，那么在不需要变量的情况下制作 currentSlide() 函数的下一个可能方法是什么？谢谢

Answer 1

我可能会跳过使用隐藏的 div 作为某种数据管理员。使用 data-id 属性代替：data-id="<%=project.id %>"

或者另一方面，为什么不直接做 onclick="currentSlide(<%= project.id %>)"？

我很乐意为您提供更多帮助，但我不知道上面 JavaScript 的意义是什么以及它应该做什么。

此外，我可能会为每个 <div class="section-projects-project-container"> 添加一个事件点击侦听器，然后在 JavaScript 中使用 getAttribute('data-id') 获得 data-id。您可以使用 this 获取调用该函数的元素，因此您可能会这样做：

this.getAttribute('data-id')

编辑：

好吧，如果它真的与那个 W3 示例非常相似 - 为什么不直接这样做呢？

<% for (var i = 0; i < projectdetails.length; i++) { %>
<div class="section-projects-thumbnail-col">
  <img
    class="section-projects-thumbnail-img cursor"
    src="data:<%= projectdetails[i].img.contentType %>;base64,<%= projectdetails[i].img.data.toString('base64') %>"
    onclick="currentSlide(<%= i %>)"
    alt="Alternate text"
  />
  <h3 class="section-projects-thumbnail-title"><%= projectdetails[i].projectName %></h3>
  <h4 class="section-projects-thumbnail-date"><%= projectdetails[i].projectDate %></h4>
</div>
<% } %>

希望可以，但是原理很清楚

如何将 EJS 元素放入 html 行的 onclick="",

How to place EJS element into onclick="", in a html line

html

javascript

dom

onclick

node.js