通过 jquery 在 Bootstrap 4 轮播中添加类“活动”，从 mongodb 加载数据时无法正常工作

Posted 2023-03-08

【中文标题】通过 jquery 在 Bootstrap 4 轮播中添加类“活动”，从 mongodb 加载数据时无法正常工作

【英文标题】：Adding class "active" on Boostrap 4 carousel via jquery, doesnt work correctly when loading data from mongodb

【发布时间】：2019-05-13 02:40:13

【问题描述】：

我有一个轮播，我想从我的 mongodb 数据库中加载轮播上的图片。因此，我只需要在第一项上设置活动类。到目前为止我所尝试的都不起作用。它添加了活动类，但随后轮播仅停留在第一项上。

下面是代码：

EJS：

    <!-- language: html -->
<div id="homePageCarousel" class="carousel slide carousel-fade" data-ride="carousel">

<% contests.forEach(function(contest) %>
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#homePageCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#homePageCarousel" data-slide-to="1"></li>
    <li data-target="#homePageCarousel" data-slide-to="2"></li>
  </ol>
  <!--/.Indicators-->
  <!--Slides-->
  <div class="carousel-inner mb-3" role="listbox">
    <div class="carousel-item">

      <div class="view">
        <img class="d-block carouselImage" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" >
        <div class="mask rgba-black-light"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive"><%= contest.title %></h3>
        <a href="/categories/<%= contest.categoryName %>/<%= contest._id %>" class="btn btn-outline-success btn-sm card-button mt-3">Μάθε Περισσότερα</a>
      </div>
    </div>
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#homePageCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#homePageCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
<% ); %>
</div>

jQquery

$(document).ready(function () 
  $('#homePageCarousel').find('.carousel-item').first().addClass('active');
);

因此，这将仅显示第一项，而不显示其余项。我做错了什么？

谢谢

【参考方案1】：

这样试试

$(document).ready(function () 
  $('#homePageCarousel').find('.carousel-item').first().addClass('active');
	var item=$('#homePageCarousel').find('.carousel-item').first().attr("class");
	alert(item);
);

.active
    background: red;
    color:#fff

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="homePageCarousel" class="carousel slide carousel-fade" data-ride="carousel">
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#homePageCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#homePageCarousel" data-slide-to="1"></li>
    <li data-target="#homePageCarousel" data-slide-to="2"></li>
  </ol>
  <!--/.Indicators-->
  <!--Slides-->
  <div class="carousel-inner mb-3" role="listbox">
    <div class="carousel-item" id="first">

      <div class="view">
        <img class="d-block carouselImage" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" >
        <div class="mask rgba-black-light"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive"></h3>
        <a href="/categories/<%= contest.categoryName %>/<%= contest._id %>" class="btn btn-outline-success btn-sm card-button mt-3">Μάθε Περισσότερα</a>
      </div>
    </div>
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#homePageCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#homePageCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
</div>

【讨论】：

不确定这与我尝试的有什么不同。

您可能错过了提及jquery 或放错了位置...将jquery 放在所有其他脚本的顶部

我已经尝试过您的代码...现在查看结果。它工作正常。所以我认为您必须将 Jquery 脚本引用放在所有脚本的顶部