Question

<div class="placeImgCol ">
                <div class="slider-outer">
                  <img src="/images/arrow-left.png" class="prev" alt="Previous">
                  <img src="/images/arrow-right.png" class="next" alt="Next">
                  <div class="slider-inner">
                    <% item.imgNames.forEach(function (img, index) { %>
                    <img src="/uploads/<%=img%>" class=<%if(index === 0){ return "active"} else { return "" } %> value="<%=index%>">
                    <% })%>
                  </div>

                </div>
            </div>

嘿伙计们，我在node.js工作，现在我试图在每个列表项目中创建一个图片库（参见上传的图片）。

现在，我可以链接这些图像，以便它们显示在devtools中，但它们具有标准的css样式display：none。这对每张图片都有好处，除了第一张我想要上课的活动＆＃39;，这会删除＆＃39; display：none＆＃39;。我在EJS中尝试了以下一行：

＆＃34; class =＆lt;％index === 0？＆＃34;有源＆＃34; ：＆＃34;＆＃34; ％GT;

但这似乎不起作用，因为它没有将活动类添加到第一个图像元素。有人能告诉我如何正确地做到这一点吗？

screenshot of the website

Answer 1

如果你不打算做三元组，if语句需要跨越几组不同的标签。我只详细说明了棘手的部分，你需要将它插回到你的代码中。

尝试这样的事情：

<% yourArray.forEach(function (img, index) { %>
<img src=<whatever> class=
  <% if (index === 0) {%>
  <%= "active" %>
  <% } %>
... and so on />

希望有所帮助。

Answer 2

如果你只想显示第一个并隐藏所有下一个，那么可能性是使用'first-child'css伪类：

.slider-inner img {
  display: none; /*all the images are not displayed*/
}

.slider-inner img:first-child {
  display: inline-block; /*just the first image will be displayed*/
}

ejs：只添加课程＆＃39; active＆＃39;到图片库的第一张图片

2 个答案: