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

Question

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

我检查了我的 bootstrap、popper 和 jQuery CDN 是否正常。

检查 __dirname 是否正确。

我已经在页面上移动了循环，看看是否有什么不同。

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

jQuery

 $(function () {
     $('.collapse').on('hidden.bs.collapse', function (e) {
         var $card = $(this).closest('.line');
         $('html,body').animate({
             scrollTop: $card.offset().top
         }, 1000);
     });
 })



//Not working//
 $(function () {
     $('.cross').on('click', function () {
         if ($('#info').css('opacity') == 1) $('#info').css('opacity', 0);
         else $('#info').css('opacity', 1);
     });
 })

CSS

.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;
}

标签： cssnode.jsexpressbootstrap-4ejs

Answer 1

Jquery 操作仅适用于第一个匹配的元素，您必须使用 '.each()' 方法处理循环，并且还必须为每个“信息”元素使用唯一的 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%>

查询：

$(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);
        });
    })
 })

CSS：

.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;
}