Javascript ejs：仅添加类'；主动'；到图像库的第一个图像 “类别=值=”“>

嘿，伙计们，我正在node.js中工作，现在我正在尝试在每个列表项中创建一个图像库（请参阅上传的图像）

现在，我可以链接这些图像，使它们显示在devtools中，但它们有一个标准的css样式的显示：none。这对每个图像都很好，除了第一个我希望有一个类“active”的图像，这会删除“display:none”。我在EJS中尝试了以下行：

“阶级=

但这似乎不起作用，因为它没有将活动类添加到第一个image元素。有人能告诉我怎么做吗

---

如果不打算使用三元，If语句需要跨越两组不同的标记。我只详细说明了棘手的部分，您需要将其插入到代码中

试着这样做：

<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>

阶级=
... 等等/>

---

希望这会有所帮助。

如果您只想显示第一个，隐藏所有下一个，那么可以使用“first child”css伪类：

。滑块内部img{
显示：无；/*不显示所有图像*/
}
.滑块内部img：第一个孩子{
显示：内联块；/*仅显示第一个图像*/
}

Jup，这就是我要找的。谢谢这也可能是一个解决方案，但是，它是一个图像库，我想在运行时添加和删除活动的类，以切换图像的显示。下面的解决方案在这方面帮助更大。

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