javascript - 动态变量和内容ejs

Question

我有一个项目列表，每个项目都有一个标签:

项目 1:标签:主页

项目 2:标签:公寓

...

我希望能够仅显示包含一个选定标签的项目

如果我放置一个标签，它就可以工作:

<% if (project.tags.includes('Appartements')) { %>
    <h2 class="project-title"><%= project.title %></h2>
<%}%>

但我想使用按钮来更改此标签:

<button onclick="changeSelectedTag('Appartements')">Appartements </button>
<button onclick="changeSelectedTag('Maisons')">Maisons </button>


<script type="text/javascript">
    changeSelectedTag = function(tag) {
        selectedTag = tag;
        console.log(selectedTag)
    }
</script>

控制台日志正在运行，每次按下按钮时我都可以看到 selectedTag 更新。但我输入了这段代码，我有 0 个项目，并且 selectedTag 为空:

<% if (project.tags.includes(selectedTag)) { %>

完整代码:

<div class="body-content">
    <div class="body-tags">
        <%selectedTag = 'Appartements'%> 
        <button onclick="changeSelectedTag('Appartements')">Appartements</button>
        <button onclick="changeSelectedTag('Maisons')">Maisons</button>
    </div>
    <div class="projects-container">
        <% projects.forEach((project) => { %>

        <% if (project.tags.includes(selectedTag)) { %>
            <div class="projects-content">
                <h2 class="project-title"><%= project.title %></h2>
            </div>
            <%}%>
        <% }); %>
    </div>
</div>

<script type="text/javascript">
    changeSelectedTag = function(tag) {
        selectedTag = tag;
        console.log(selectedTag)
    }
</script>

在我的 Controller 中渲染

exports.list = (req, res) => Project.find((err, projects) => {
  if (err) return next(err);
  let selectedTag;
  return res.render('../templates/projects.ejs', { projects: projects, selectedTag: selectedTag });
});

我想显示的内容:

<div id="here" class="items-container">
                <% projects.forEach((project) => { %>
                <%selectedTag = 'Appartements'%>
                <% if (project.tags.includes(selectedTag)) { %>
                    <div class="items-content">
                        <img onmouseover="onProjectHover('<%=project.id%>-img', '<%=project.id%>-titles')"  class="item-img" src="/<%=project.images.main.url%>" alt="<%=project.images.main.alt%>">
                        <div onmouseleave="onProjectLeave('<%=project.id%>-img', '<%=project.id%>-titles')" id="<%=project.id%>-img" class="item-hover-content">
                            <div class="item-hover-content-title">Surface : <span class="item-hover-content-value"><%=project.surface%> m2</span></div>
                            <div class="item-hover-content-title">Budget : <span class="item-hover-content-value"><%=project.budgect%></span></div>
                            <div class="item-hover-content-title">Durée : <span class="item-hover-content-value"><%=project.duration%> mois</span></div>
                            <button class="item-hover-content-btn"><a href="<%=project.slug%>">Voir le projet <i class="fas fa-arrow-right"></i></a></button>
                        </div>
                        <div id="<%=project.id%>-titles" class="item-titles">
                            <h2 class="item-title"><%= project.title %></h2>
                            <p class="item-city"><%= project.cities %></p>
                        </div>

                    </div>
                    <%}%>
                <% }); %>
            </div>

Answer 1

此 ejs 代码有效。我使用纯javascript。您还可以使用 jquery。

<div class="body-content">
  <div class="body-tags">
    <button id='Appartements' onclick="changeSelectedTag('Appartements',<%=JSON.stringify(projects)%>)">Appartements</button>
    <button onclick="changeSelectedTag('Maisons',<%=JSON.stringify(projects)%>)">Maisons</button>

  </div>
  <div id='here' class="projects-container"></div>
</div>
<script type="text/javascript">
  changeSelectedTag = function(tag, projects) {
    selectedTag = tag;
    console.log(selectedTag);
    var main = document.getElementById('here');
    main.innerHTML = '';
    console.log(projects);
    projects.forEach(el => {
      if (el.tags.includes(selectedTag)) {
        var div = document.createElement('div');
        div.className = 'projects-content';
        var h2 = document.createElement('h2');
        h2.className = 'project-title';
        h2.innerHTML = el.title;
        div.appendChild(h2);
        main.appendChild(div);
      }

    });

  }
  document.getElementById('Appartements').click();
  //changeSelectedTag('Appartements',<%=JSON.stringify(projects)%>);
</script>