用 jQuery 或 JS ( owl-carousel) 给一个项目另一个项目的 children 的 class

Question

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

这是我 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>

我想将 div 与 class="owl-item 活动" child 一起使用（正在显示的活动 testimonial-item）为部分元素 id="testimonials" 提供 class，因此每次任何不同的 .owl-item 获得 class .active，该部分的背景也会发生变化。我试着用 javascript 和 jQuery 来做，但对我没有任何用处，也许因为我还是个菜鸟 xD。

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

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

所以如果有任何JS大神或jQuery可以帮助我，请:V 我真的不知道我在做什么。

感谢您阅读到最后;)

Answer 1

由于我能够理解你的问题，请将以下代码添加到你的 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")
  );
});

Answer 2

Daddys Code 的代码运行良好，但实际上速度足以将 class 提供给“#testimonials”，甚至在 class“活动”从“[=18=”更改之前]-item" 到另一个，所以它从最后一个 "owl-item active" 给了它 class 它可以很容易地使用 "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"));
});

用 jQuery 或 JS ( owl-carousel) 给一个项目另一个项目的 children 的 class

Give an item the class of anothers item's children with jQuery or JS ( owl-carousel)

javascript

jquery

children

carousel

owl-carousel