Как я могу просмотреть список элементов и переключить класс на них в jQuery с задержкой между каждым переключением?

Question

Я хочу просмотреть список элементов и переключить класс для каждого (.active), меняя его каждые 4 секунды. Активный класс изменит цвет фона значка и отобразит соответствующий текст под ним.

Итак, первый элемент в моем списке будет иметь класс active по умолчанию (и его информация будет отображаться по умолчанию)и вся остальная информация для других значков будет скрыта, затем через 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();
    };


});

Answer 1

Ниже приведен рабочий пример ванили JS

const icons = document.getElementsByClassName("fa");
const texts = document.getElementsByClassName("perk-text");
Array.from(texts).forEach(textElement => {
  textElement.style.display = "none";
});

setInterval(() => {
  const iconsArray = Array.from(icons);
  const activeIconIndex = iconsArray.findIndex(icon => icon.classList.contains("active"));
  const nextActiveIndex = (activeIconIndex + 1) % iconsArray.length
  iconsArray[nextActiveIndex].classList.add("active");
  iconsArray[activeIconIndex].classList.remove("active");
  toggleText(iconsArray[nextActiveIndex].classList);
}, 4000);


function toggleText(activeIconClasses) {
  let textIdToActivate = "";
  switch (activeIconClasses[1]) {
    case "fa-wifi":
      textIdToActivate = "wifi-text";
      break;
    case "fa-plug":
      textIdToActivate = "plug-text";
      break;
    case "fa-suitcase":
      textIdToActivate = "suitcase-text";
      break;
    case "fa-wheelchair":
      textIdToActivate = "wheelchair-text";
      break;
  }
  Array.from(texts).forEach(textElement => {
    textElement.style.display = "none";
  });
  const textElement = document.getElementById(textIdToActivate);
  textElement.style.display = "block";


}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/fontawesome.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner">
    <div class="item wifi-icon"><i class="active 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>
  <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>

</div>

Answer 2

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>