Question

我有一个forEach循环，该循环遍历播种的Mongo数据库。一切正常，除了我的一个来自jQuery文件的CSS函数之外，其他一切均正常。它适用于我循环中的第一个项目，其余的则不起作用。

我检查了我的引导程序，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;
}

Answer 1

jQuery操作仅适用于第一个匹配的元素，您必须为句柄loop使用'.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%>

jQuery：

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

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

1 个答案: