javascript - 如何在 jQuery 中对特定事件顺序应用函数？

Question

在我当前的项目中，我使用 Bootstrap (3.3.1) 标准轮播作为推荐区域。根据设计要求，我有一个绝对定位的部分，其中应该显示实际的推荐(文本)。因此，我通过应用特殊类隐藏了所有推荐 (.hide_testimo {display: none !important;})。以下是其中之一的示例:

<section class="testimonial_holder hide_testimo">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet neque ut ex        porttitor tincidunt. Vivamus at efficitur metus.</p>
     <h5 class="testiperson">Linda Plumer <br> <b>Clonix, CTO</b></h5>
</section>

我想要实现的是检查幻灯片(.item)何时获得其“事件”类(即显示给定的幻灯片)并从逻辑上删除推荐(.item)。 hide_testimo) 使特定的推荐可见。因此，我使用以下 jQuery 片段检查项目:

$('.item').each(function(){
    if ($('.item').hasClass('active')){
     // what's next..?  
    }
})

重要提示:我没有提到 .item 类位于实际标记的不同部分，它引用轮播本身，而 .testimonial_holder 只是一个位于 slider 上方并包含文本的区域。为了更好地理解，以下是完整的标记:

<div id="testimo_slider" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <section class="testimonial_holder show_testimo">
                            <p>"Call you up in the middle of the night
                                like a firefly without a light.
                                You were there like a blowtorch burning
                                I was a key that could use a little turning,
                                so tired that i couldn't even sleep..."</p>
                            <h5 class="testiperson">Janet Aghajanian <br> <b>Lahmajo Systems, CTO</b></h5>
                        </section>
                        <section class="testimonial_holder hide_testimo">
                            <p>"In 1997, Beauty changed my life
                                Who would've known that she would be my future wife
                                or the mother of a child so beautiful
                                see. I had to have them all to be satisfied
                                and on an average night, I'd take four or five"</p>
                            <h5 class="testiperson">Ishita Mehta <br> <b>ORACLE, CSR</b></h5>
                        </section>
                        <section class="testimonial_holder hide_testimo">
                            <p>"Remarkable, incredible, confrontational, yet irreplaceable
                                RAION is fantastic, so I let it go!
                                But it's got the kind of love that you can't let go
                                and still I loved her unconditionally
                                so I wish she had've told me that she didn't love me"</p>
                            <h5 class="testiperson">Monica Lee <br> <b>FAIP Inc., Blogger</b></h5>
                        </section>
                        <section class="testimonial_holder hide_testimo">
                            <p>"Aiyyo whasup kid, feel the rush, glad you kept in touch
                                with RAION, who be puffin on the Dutch
                                bustin guns, lay back in the cut
                                can it be, it's just a dream when you're on your scene.
                                From the streets where life ain't cheap"</p>
                            <h5 class="testiperson">Peter Lancaster <br> <b>TurboTax, Lawyer</b></h5>
                        </section>
                        <ol class="carousel-indicators pagerzz">
                            <li data-target="#testimo_slider" data-slide-to="0" class="active"></li>
                            <li data-target="#testimo_slider" data-slide-to="1"></li>
                            <li data-target="#testimo_slider" data-slide-to="2"></li>
                            <li data-target="#testimo_slider" data-slide-to="3"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="img/tstmnl_1.jpg" class="img-responsive t_image">
                            </div>

                            <div class="item">
                                <img src="img/tstmnl_2.jpg" class="img-responsive t_image">
                            </div>

                            <div class="item">
                                <img src="img/tstmnl_3.jpg" class="img-responsive t_image">
                            </div>

                            <div class="item">
                                <img src="img/tstmnl_4.jpeg" class="img-responsive t_image">
                            </div>

                        </div>
                    </div>

问题是我不知道如何按顺序将 (.hide_testimo) 类删除到推荐持有者部分，因此尽快 .item 变为事件状态，只有一个推荐部分可见，因此会更进一步。

Answer 1

您可以通过采取不同的方法纯粹在 CSS 中完成此操作。为您的“item”和“testimonial_holder”元素提供连续的类名称，例如“a”、“b”、“c”等。然后，当您想要更改事件元素时，将一个类添加到外部“testimo_slider”容器中控制布局。

        <section class="testimonial_holder a">
            <p>"Call you up in the middle of the night
                like a firefly without a light.
                You were there like a blowtorch burning
                I was a key that could use a little turning,
                so tired that i couldn't even sleep..."</p>
            <h5 class="testiperson">Janet Aghajanian <br> <b>Lahmajo Systems, CTO</b></h5>
        </section>
        <section class="testimonial_holder b">
            <p>"In 1997, Beauty changed my life
                Who would've known that she would be my future wife
                or the mother of a child so beautiful
                see. I had to have them all to be satisfied
                and on an average night, I'd take four or five"</p>
            <h5 class="testiperson">Ishita Mehta <br> <b>ORACLE, CSR</b></h5>
        </section>
        <!-- etc -->

        <div class="carousel-inner" role="listbox">
            <div class="item a">
                <img src="img/tstmnl_1.jpg" class="img-responsive t_image">
            </div>

            <div class="item b">
                <img src="img/tstmnl_2.jpg" class="img-responsive t_image">
            </div>

            <!-- etc -->

现在您可以使用简单的 CSS 控制布局，并且只需更改外部容器上的类:

.carousel .testimonial_holder {
  display: none;
  /* other layout for when the block is not active */
}

.carousel .item {
  /* layout for when "item" block is not active */
}

.carousel.show-a .testimonial_holder.a {
  display: block;
  /* layout for when the block is active */
}

.carousel.show-a .item.a {
  /* for when the "item" blocks are active */
}

不需要任何!important限定符；一般来说，如果您认为您需要!important，您可能应该开始重新思考您正在做的事情。

如果您的轮播中有很多 block ，这可能会变得非常冗长，但即使如此，像 SCSS 或 LESS 这样的工具也会使它变得非常轻松。 (对于数百个 block ，您可能想提出另一个想法。)