引导4旋转木马指示器活动状态未正确更改

Question

我创建了一个Bootstrap，并将Carousel部分空了起来，以便根据幻灯片的数量动态地使用jquery填充它。

<section class="carousel-banner side-by-side darkblue-background-color">
      <div id="carouselBanner" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="container">
          <div class="carousel-inner">
            <ol class="carousel-indicators"></ol>
              <div class="carousel-item active">
                <div class="row">
                  <div class="carousel-banner-top col-12 order-1 p-4"></div>
                  <div class="col-12 col-lg text-content p-4 order-3 order-lg-1 align-self-center">
                    <div class="carousel-indicators-container"></div>
                    <h2 class="heading__title">Title Text</h2>
                    <div class="carousel-controls mt-3">
                      <span class="carousel-counter"></span>
                      <span class="carousel-nav"></span>
                    </div>
                    <div class="quote-icon mt-3">
                      <span>
                        <i class="fa fa-quote-left"></i>
                      </span>
                    </div>
                    <div class="description mt-3">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Cras consectetur feugiat est, eu ultrices magna varius
                        in.
                      </p>
                    </div>
                    <div class="mt-3">
                      <a class="link-cta">Read the report</a>
                    </div>
                  </div>
                  <div class="col-12 col-lg creative-content pl-lg-0 order-2 order-lg-2">
                    <img />
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="row">
                  <div class="col-12 order-1 d-lg-none p-4"></div>
                  <div class="col-12 col-lg text-content p-4 order-3 order-lg-1 align-self-center">
                    <div class="carousel-indicators-container d-lg-none"></div>
                    <h2 class="heading__title">Title Text</h2>
                    <div class="carousel-controls mt-3">
                      <span class="carousel-counter"></span>
                      <span class="carousel-nav"></span>
                    </div>
                    <div class="quote-icon mt-3">
                      <span>
                        <i class="fa fa-quote-left"></i>
                      </span>
                    </div>
                    <div class="description mt-3">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Cras consectetur feugiat est, eu ultrices magna varius
                        in.
                      </p>
                    </div>
                    <div class="mt-3">
                      <a class="link-cta">Read the report</a>
                    </div>
                  </div>
                  <div class="col-12 col-lg creative-content pl-lg-0 order-2 order-lg-2">
                    <img />
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="row">
                  <div class="col-12 order-1 d-lg-none p-4"></div>
                  <div class="col-12 col-lg text-content p-4 order-3 order-lg-1 align-self-center">
                    <div class="carousel-indicators-container d-lg-none"></div>
                    <h2 class="heading__title">Title Text</h2>
                    <div class="carousel-controls mt-3">
                      <span class="carousel-counter"></span>
                      <span class="carousel-nav"></span>
                    </div>
                    <div class="quote-icon mt-3">
                      <span>
                        <i class="fa fa-quote-left"></i>
                      </span>
                    </div>
                    <div class="description mt-3">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Cras consectetur feugiat est, eu ultrices magna varius
                        in.
                      </p>
                    </div>
                    <div class="mt-3">
                      <a class="link-cta">Read the report</a>
                    </div>
                  </div>
                  <div class="col-12 col-lg creative-content pl-lg-0 order-2 order-lg-2">
                    <img />
                  </div>
                </div>
              </div>
          </div>
          <span class="carousel-nav-btns">
            <button type="button" data-target="#carouselBanner" data-slide="prev">
              <span aria-hidden="true">
                <i class="fa fa-chevron-left"></i>
              </span>
              <span class="sr-only">Previous</span>
            </button>
            <button type="button" data-target="#carouselBanner" data-slide="next">
              <span aria-hidden="true">
                <i class="fa fa-chevron-right"></i>
              </span>
              <span class="sr-only">Next</span>
            </button>
          </span>
        </div>
      </div>
    </section>

这是我的jQuery代码

$(document).ready(function() {
// Variables
var $carousel = $('.carousel');
var $carouselIndicators = $('.carousel-indicators');
var $carouselIndicatorsContainer = $('.carousel-indicators-container');
var $carouselItem = $('.carousel-item');

$carouselItem.each(function(index) {
    if (index === 0) {
        $carouselIndicators.append("<li data-target='#carouselBanner' data-slide-to='"+index+"' class='indicator active'></li>");
    } else {
        $carouselIndicators.append("<li data-target='#carouselBanner' data-slide-to='"+index+"' class='indicator'></li>");
    }
});

$carouselIndicatorsContainer.append($carouselIndicators);  

})；

我使用jQuery将旋转木马指示器附加到旋转木马内的容器中以进行定位。

一切都正常，除了当我单击指示符时，活动类没有被转移到被单击的指示符上。

我似乎不知道为什么，也可能需要帮助。

Answer 1

尝试只在forEach中添加活动类。检查是否值hasClass('active')，如果不需要添加。加载项目时，可以在第一个子项目或数组中的第一个项目中添加活动类。