为什么我的CSS不适用于所有EJS循环？

我有一个forEach循环，它在我的种子Mongo数据库中循环。除了我的一个来自jQuery文件的CSS函数外，其他一切都正常工作。它适用于我循环中的第一项，其余项则不适用

我已经检查了我的引导、popper和jQuery CDN是否正常

已检查\uuuu目录名是否正确

我已经在页面上移动了循环，看看是否有什么改变

HTML/EJS

<%include partials/header%>


<div class="col-lg-10 col-md-6">
  <%news.forEach(function(news) { %>

  <div id="accordion" class="accordion">
          <%news.forEach(function(news) {%>

    <div class="line">

      <div id="headingOne<%=news._id%>">

        <h5 class="mb-3"> <%=news.title%>
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne<%=news._id%>"
            href="#collapseOne<%news._id%>" aria-expanded="true" type="button" aria-controls="<%=news._id%>">
            <img class="cross" src="images/cross.png">
          </button>
        </h5>
      </div>
      <div id="collapseOne<%=news._id%>" class="navbar-collapse collapse show" aria-labelledby="headingOne<%=news._id%>"
        data-parent="#accordion">
        <div id="info">
          <img src="<%=news.image%>">
          <p><%=news.description%></p>
        </div>
      </div>

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

</div>
</div>


</div>

<script type="text/javascript" src="../javascripts/news-slider.js"></script>


<%include partials/footer%>

CSS

---

Jquery操作仅适用于第一个匹配的元素，必须为handle使用“.each（）”方法，并且还必须为每个“info”元素使用唯一的id（如上面的@iofjuupasli注释）

请尝试以下代码：

<%include partials/header%>


<div class="col-lg-10 col-md-6">
  <%news.forEach(function(news) { %>

  <div id="accordion" class="accordion">
          <%news.forEach(function(news, index) {%>

    <div class="line">

      <div id="headingOne<%=news._id%>">

        <h5 class="mb-3"> <%=news.title%>
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne<%=news._id%>"
            href="#collapseOne<%news._id%>" aria-expanded="true" type="button" aria-controls="<%=news._id%>">
            <img class="cross" src="images/cross.png">
          </button>
        </h5>
      </div>
      <div id="collapseOne<%=news._id%>" class="navbar-collapse collapse show" aria-labelledby="headingOne<%=news._id%>"
        data-parent="#accordion">
        <div id="info-<%=index%>" class="info"> <!-- add index for unique id, and add info class -->
          <img src="<%=news.image%>">
          <p><%=news.description%></p>
        </div>
      </div>

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

</div>
</div>


</div>

<script type="text/javascript" src="../javascripts/news-slider.js"></script>


<%include partials/footer%>

Css:

---

尝试使用class而不是id。id属性应该始终是uniqNo，请参见这一行

是的，我发现了！遗憾的是，我的代码仍然存在同样的问题。仔细检查，我的所有索引都是相同的数字。您确定要将索引添加到第6行而不是第4行吗？另外，您应该避免重复变量名（news被使用了两次），将其更改为childNews，并将索引放入其中（而不是父项），我肯定是这样做的。我还将孩子的“新闻”改为“儿童新闻”。

.navbar-collapse {
    transition: height 1s, opacity 0.3s;
}

#info {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

<%include partials/header%>


<div class="col-lg-10 col-md-6">
  <%news.forEach(function(news) { %>

  <div id="accordion" class="accordion">
          <%news.forEach(function(news, index) {%>

    <div class="line">

      <div id="headingOne<%=news._id%>">

        <h5 class="mb-3"> <%=news.title%>
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne<%=news._id%>"
            href="#collapseOne<%news._id%>" aria-expanded="true" type="button" aria-controls="<%=news._id%>">
            <img class="cross" src="images/cross.png">
          </button>
        </h5>
      </div>
      <div id="collapseOne<%=news._id%>" class="navbar-collapse collapse show" aria-labelledby="headingOne<%=news._id%>"
        data-parent="#accordion">
        <div id="info-<%=index%>" class="info"> <!-- add index for unique id, and add info class -->
          <img src="<%=news.image%>">
          <p><%=news.description%></p>
        </div>
      </div>

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

</div>
</div>


</div>

<script type="text/javascript" src="../javascripts/news-slider.js"></script>


<%include partials/footer%>

$(function () {
    $('.cross').each(function (index) {
        $(this).on('click', function () {
            if ($('#info-' + index).css('opacity') == 1) $('#info').css('opacity', 0);
            else $('#info-' + index ).css('opacity', 1);
        });
    })
 })

.navbar-collapse {
    transition: height 1s, opacity 0.3s;
}

.info {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}