时间戳

首页 > 解决方案 > 如何在 jQuery 中循环遍历元素列表并在它们上切换一个类，每次切换之间有延迟？

javascript - 如何在 jQuery 中循环遍历元素列表并在它们上切换一个类，每次切换之间有延迟？

问题描述

我正在寻找遍历元素列表并在每个元素上切换一个类（.active），每 4 秒更改一次。活动类将更改图标的背景颜色并在下方显示它的相关文本。

因此，我列表中的第一个元素默认情况下将具有活动类（默认情况下将显示其信息），其他图标的所有其他信息将被隐藏，然后在 4 秒后我想删除此类并添加类到下一个元素（从而改变它的背景颜色并显示它的文本）等等，一旦最后一个元素切换了类，就循环回到第一个元素。

我正在尝试使用 jquery each() 来完成此操作，但似乎无法使其正常工作。


<div id="outer">
        <div id="inner">
                <div class="item wifi-icon"><i class="fa fa-wifi" aria-hidden="true"></i></div>
                <div class="item plug-icon"><i class="fa fa-plug " aria-hidden="true"></i></div>
                <div class="item suitcase-icon"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
                <div class="item wheelchair-icon"><i class="fa fa-wheelchair" aria-hidden="true"></i></div>
                <div class="item play-icon"><i class="fa fa-youtube-play" aria-hidden="true"></i></div>
        </div>
        <div id="info">
                <div id="wifi-text" class="perk-text ">
                        <h3>Free WiFi</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="plug-text" class="perk-text ">
                        <h3>Power Sockets</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="suitcase-text" class="perk-text ">
                        <h3>Luggage</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="wheelchair-text" class="perk-text ">
                        <h3>Wheelchair Accessible</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="play-text" class="perk-text ">
                        <h3>Onboard Entertainment</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
        </div>

</div>



 .active {
    background-color:#74BDE9;
    color: #ffffff;
    cursor: pointer;
  }



$(document).ready(function(){

    let itemsLength = $('#inner > .item').length;
    let active = $('.active');
    let item = $('.fa');


    setInterval( function() {
        item.each( function(index) {
            if( $(this).hasClass('active') ) {
                $(this).removeClass('active');
                $(this).next().addClass('active');
            }
        });     
    }, 4000);


    $('.perk-text').hide();

    if ( $('.fa-wifi').hasClass('active') ) {
        $('#wifi-text').show();
    };

    if ( $('.fa-plug').hasClass('active') ) {
        $('#plug-text').show();
    };

    if ( $('.fa-suitcase').hasClass('active') ) {
        $('#suitcase-text').show();
    };

    if ( $('.fa-wheelchair').hasClass('active') ) {
        $('#wheelchair-text').show();
    };

    if ( $('.fa-play').hasClass('active') ) {
        $('#play-text').show();
    };


});

标签： javascriptjqueryhtmlcss

解决方案

setInterval+toggleClass将为您执行此操作。每 2 秒更改一次文本颜色的示例：

setInterval(function() {
  $("#para").toggleClass("red")
}, 2000)
.red {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="para">Hi there</p>

推荐阅读