Question

因此，当嵌套的boostrap轮播将其.active类更改为另一个元素时，我正在尝试更改背景图像。无法让我的jQuery工作，并且想要咨询关于如何正确执行此操作的互联网。我相信我的问题在于我的jQuery。看一看！在此先感谢您的帮助！

HTML：

<section id="testimonial" class="padding-top-bottom image-bg light-typo">

        <div class="container">

            <div class="testimonial">
                <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example" data-interval="10000">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4" class=""></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <h1>“Grip Clean does a great job of cleaning up your hands after a messy afternoon of bike maintenance, does not dry out your skin, and was created by one of our own. Why use anything else?”</h1>
                            <br>
                            <h3>– Transworld Motocross Magazine</h3>
                        </div>
                        <div class="item">

                            <h1>“The best hand soap ever – you guys gotta try it.”</h1>
                            <br>
                            <h3>– Jeremy Stenberg</h3>
                        </div>
                        <div class="item">
                            <h1>“Grip Clean is a complete hit here at our shop. All of the guys are saying it’s the best stuff they’ve ever used.”</h1>
                            <br>
                            <h3>–Subaru Rally Team USA</h3>
                        </div>
                        <div class="item">
                            <h1>“I love this soap.<br>Its helped me clean up after a long day of lawn work.” </h1>
                            <br>
                            <h3>– Matt Hoffman</h3>
                        </div>
                        <div class="item">
                            <h1>“This stuff is rad, I didn’t know something this good could exist.”</h1>
                            <br>
                            <h3>– Robbie Maddison </h3>
                        </div>




                    </div>
                    <br><br><br>
                </div>
            </div>
            <div class="overlay-bg"></div>
        </div>
    </section>

CSS：

.bg-one{
background-image: url(../img/subaru-slider/Sub_420.jpg) !important;
}

.bg-two{
    background-image: url(../img/subaru-slider/Sub_424.jpg) !important;
}

JS / jQuery的：

$(document).ready(function(){
    if( $(".carousel-inner :nth-child(1)").hasClass("active")){
        $("#testimonial").addClass("bg-one");
    }
    if( $(".carousel-inner :nth-child(2)" ).hasClass("active") ){
        $("#testimonial").addClass("bg-two").removeClass("bg-one");

    }

    });

再次感谢您对此问题的任何意见！试图达到最后期限并且难倒！

Answer 1

在document ready事件期间，您只能调用一次jQuery代码。您希望在轮播更改幻灯片时将该代码附加到事件：

$(document).ready(function() {
  $('#myCarousel').on('slide.bs.carousel', function () {
    // ...
  })
});

有关详细信息，请查看Carousel Events的Bootstrap文档。

Answer 2

它没有按预期工作，因为您的代码无法知道类何时发生了变化。 $(document).ready()只会触发一次，而不是每次发生变化。

您需要使用活动。此代码不完整，但指向正确的方向，即使用trigger()。

$(document).ready(function(){

    // bind event listener
    $("#testimonial").bind('cssClassChanged', className, function(){ 
      // you can do stuff in response to the "triggered" event here. You know the className since it is being passed in. 
    });  

    if( $(".carousel-inner :nth-child(1)").hasClass("active")){
        $("#testimonial").addClass("bg-one");
        // trigger event when the calss has been set
        $("#testimonial").trigger("cssClassChanged", "bg-one");

    }
    if( $(".carousel-inner :nth-child(2)" ).hasClass("active") ){
        $("#testimonial").addClass("bg-two").removeClass("bg-one");

    }

    });

当轮播滑块改变其“活动”状态时，jquery更改<section>的背景图像

2 个答案: