Question

我想使用Bootstrap 4中的轮播来显示动态内容。轮播的第一项需要css类“.active”。实际上这应该直接添加到HTML中，但这对我的动态内容输出有点严重。因此，我想通过JavaScript添加它，我找到了这个主题：Appending a class to the first div of a set of dynamically created divs

解决方案是在结束正文标记之前添加以下JavaScript：

$(".carousel-item:first").addClass('active');

到目前为止，只有当您的页面上有一个轮播时才会有效。如果你有更多，这只适用于代码中的第一个轮播。

我现在所做的是在页面上的每个轮播中添加一个自定义类（carousel1，carousel2，carousel3，...），并为每个轮播添加一行到我的JavaScript文件中，如：

$(".carousel-item.carousel1:first").addClass('active');
$(".carousel-item.carousel2:first").addClass('active');
$(".carousel-item.carousel3:first").addClass('active');

但是为了更灵活，是否有一个JavaScript解决方案，它的工作更通用，每个轮播没有自定义css类？

提前感谢任何提示和提示。

的Bastian

Answer 1

您需要遍历页面上的轮播并在循环内循环，定位每个轮播的第一个.carousel-item。

从BS4文档抓取HTML并插入3次以模仿实际页面。 CSS只是调出“活动”项目，因为图像显然无法在SO上运行。

$(document).ready(function(){
  $('.carousel').each(function(){
    $(this).find('.carousel-item').eq(0).addClass('active');
  });
});

/* demo only */
.carousel {
  border-bottom: 1px solid #ddd;
  margin-bottom : 2em;
  padding-bottom: 2em;
 }
.carousel-item.active img {
  color: green;
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Answer 2

你的旋转木马应该有不同的父母，像这样你可以使用第一种类型。

$(".carousel-item:first-of-type").addClass('active');

将css类添加到页面上所有轮播的所有第一个轮播项目中

2 个答案: