javascript - 循环遍历同一类的元素集，并在事件更改时按顺序添加/删除类

Question

我的登陆页面上有一个小轮播，我想在幻灯片更改时更改文本 block (标题和内容)。因此，我制作了 5 个包含标题和内容的 block ，其中第一个是可见的，而其余的则有一个 .hideme 类，该类仅设置 display:none; 这里是HTML 部分:

<div class="col-sm-6 slider_riteside_holder">
     <div class="ngage_slide_ttl_and_info">
          <h2>Useful, Powerful <span>and Awesome!</span></h2>
          <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc vitae
             tellus luctus ullamcorper. Nam porttitor ullamcorper felis at convallis. Aenean ornare
             vestibulum nisi fringilla lacinia. Nullam pulvinar sollicitudin velit id laoreet.
             Quisque non rhoncus sem.
          </p>
     </div>
     <div class="ngage_slide_ttl_and_info hideme">
          <h2>Great <span>Expectations</span></h2>
          <p>
             Goore ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc vitae
             tellus luctus ullamcorper. Nam porttitor ullamcorper felis at convallis. Aenean ornare
             vestibulum nisi fringilla lacinias twat.
          </p>
     </div>
     <div class="ngage_slide_ttl_and_info hideme">
         <h2>Amazing Features <span>For You</span></h2>
         <p>
             Goore ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc vitae
             tellus luctus ullamcorper. Nam porttitor ullamcorper felis at convallis. Aenean ornare
             vestibulum nisi fringilla lacinias twat.
         </p>
     </div>
     <div class="ngage_slide_ttl_and_info hideme">
         <h2>Rain Your <span>Love Down</span></h2>
         <p>
             Goore ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc vitae
             tellus luctus ullamcorper. Nam porttitor ullamcorper felis at convallis. Aenean ornare
             vestibulum nisi fringilla lacinias twat.
         </p>
     </div>
     <div class="ngage_slide_ttl_and_info hideme">
          <h2>Make America <span>Great Again!</span></h2>
          <p>
             Goore ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc vitae
             tellus luctus ullamcorper. Nam porttitor ullamcorper felis at convallis. Aenean ornare
             svestibulum nisi fringilla lacinias twat.
          </p>
      </div>
      <button class="btn btn-default ngage_learnmore_btn">Learn more</button>
</div>

因此，每次 slider 更改时(我已经绑定(bind)了相应的事件)，应该循环遍历所有具有 .ngage_slide_ttl_and_info 类的元素，并通过删除来显示即将到来的信息 block 它的 .hideme 类并传递到前一个 block (即隐藏它)。这是 for 循环的空 JS 代码(我使用 Slick 作为轮播):

$('.p_slider').on('afterChange', function(event, slick, currentSlide, nextSlide){

    $(".ngage_slide_ttl_and_info").each(function() {

    });

});

我怎样才能实现这个目标？也许有更合乎逻辑和优化的方法来做到这一点？谢谢!

Answer 1

试试这个;)

var elements = $(".ngage_slide_ttl_and_info");

$('.p_slider').on('afterChange', function(slick, currentSlide){
    /* Add hideme class to all elements */
    elements.addClass('hideme');

    /* remove hideme class from current slide index element */
    elements.eq(currentSlide).removeClass('hideme');
});