使用 jQuery 或 JS ( owl-carousel ) 为一个项目指定另一个项目的子项的类

问题描述

这是我的问题。 我在我的页面中使用了 owl.carrousel MIT 库。 该库会自动创建一个 div 以在必须显示时为其提供“活动”类。 当任何不同的“owl-item”处于活动状态时，我想在 carrousel 部分设置不同的背景。

这是我的 index.html 文档中的 html 代码：

<section id="testimonials">

      <div class="container">
        <div class="owl-carousel testimonials-carousel">

            <div class="testimonial-item Titem1">
              <h3>First carousel item</h3>
            </div>

            <div class="testimonial-item Titem2">
              <h3>Second carousel item</h3>
            </div>

            <div class="testimonial-item Titem3">
              <h3>Third carousel item</h3>
            </div>

            <div class="testimonial-item Titem4">
              <h3>Fourth carousel item</h3>
            </div>

        </div>
      </div>

</section>

这是 owl.carrousel 库发挥作用后页面上的 html 代码：

<section id="testimonials">

    <div class="container">
        <div class="owl-carousel testimonials-carousel">

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item active">
                        <div class="testimonial-item Titem1">
                            <h3>First carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem2">
                            <h3>Second carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem3">
                            <h3>Third carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem4">
                            <h3>Fourth carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

         </div>
     </div>
</section>

我想使用带有 class="owl-item active" 子项（正在显示的活动推荐项）的 div 来为部分元素 id="testimonials" 提供一个类，因此每次都有不同的 . owl-item 获取类 .active，该部分的背景也会发生变化。 我尝试用 javascript 和 jQuery 来做这件事，但对我来说没有任何效果，可能因为我仍然是一个菜鸟 xD。

例如这是我尝试的最后一件事

$('#testimonials').addClass( $('.owl-item.active > .testimonial-item').attr("class") );

因此，如果有任何 JS 或 jQuery 之神可以帮助我，请：V 我真的不知道我在做什么。

感谢您阅读到最后;)

解决方法

Daddys Code 的代码运行良好，但实际上足够快，甚至在类“活动”从“猫头鹰项目”更改为另一个之前就可以将类提供给“#testimonials”，因此它为它提供了从最后一个“owl-item active”可以使用“translated.owl.carousel”而不是“change.owl.carousel”轻松修复：

$(".owl-carousel").owlCarousel();

var owl = $(".owl-carousel");
owl.owlCarousel();

owl.on("translated.owl.carousel",function (event) {
    $("#IDi").removeClass();
    $("#IDi").addClass($(".owl-item.active > .testimonial-item").attr("class"));
});

,

由于我能够理解您的问题，请将以下代码添加到您的 js 文件中

$(".owl-carousel").owlCarousel();

var owl = $(".owl-carousel");
owl.owlCarousel();

owl.on("translated.owl.carousel",function (event) {
  $("#testimonials").removeClass();
  $("#testimonials").addClass(
    $(".owl-item.active > .testimonial-item").attr("class")
  );
});