Question

我在着陆页上有一个小轮播，我想在幻灯片更改时更改文本块（标题和内容）。所以我制作了5个包含标题＆amp;内容，其中第一个是可见的，而其余内容只有.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>

所以每次滑块改变时（我已经对相应的事件进行了挖掘），应该循环遍历具有.ngage_slide_ttl_and_info类的所有元素，并通过删除它来显示即将到来的信息块{ {1}}类并传递给前一个块（即隐藏它）。这是循环的空JS代码（我使用Slick来表示轮播）：

.hideme

我如何实现这一目标？也许有更多的逻辑和优化方法来做到这一点？谢谢！

Answer 1

我认为你不需要手动循环。如果您唯一需要的是取消隐藏当前未隐藏的元素，并取消隐藏下一个元素，您可能只需要找到它们：

var $current = $(".ngage_slide_ttl_and_info:not(.hideme)")
$current.addClass("hideme"); /* add class */
$current.removeClass("hideme");  /* remove class */

Answer 2

您可以尝试以下方式而不是循环：

$('.p_slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
         var current = $('.ngage_slide_ttl_and_info:visible');
         var nextDiv = $(current).next();
         $(current).addClass('hideme');
         $(nextDiv).removeClass('hideme');
});

Answer 3

试试这个;）

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');
});

循环遍历同一类的元素集，并在事件更改时依次添加/删除类

3 个答案: