0

Наверное из-за такой структуры не могу понять, почему неправильно работает, класс добавляется произвольно и не на 1 сек, как будто сходит с ума. Подскажите, что именно не так? Нужно использовать функцию несколько раз на странице, структура html такая же, повторяется, может из-за этого ?

    jQuery(document).ready(function($) {
        $('.home-tabs').each(function(index){
          var time = index * 1000;
          setInterval(function(){
            $(this).find( "div.home-sub-title" ).toggleClass('active-tab');
          }.bind(this), time);
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-tabs">
      <div class="wpb_column vc_column_container vc_col-sm-4">
        <div class="vc_column-inner ">
          <div class="wpb_wrapper">
         <div class="wpb_text_column wpb_content_element  home-sub-title">
          <div class="wpb_wrapper">
           <h4>The Best</h4>
                    <p>The best barbering services you can find in your city</p>
          </div>
         </div>
          </div>
        </div>
      </div>
      <div class="wpb_column vc_column_container vc_col-sm-4">
        <div class="vc_column-inner ">
          <div class="wpb_wrapper">
         <div class="wpb_text_column wpb_content_element  home-sub-title active-tab">
              <div class="wpb_wrapper">
          <h4>Welcome</h4>
          <p>Welcome to Buddy Barbershop website</p>
              </div>
         </div>
        </div>
       </div>
      </div>
      <div class="wpb_column vc_column_container vc_col-sm-4">
        <div class="vc_column-inner ">
          <div class="wpb_wrapper">
         <div class="wpb_text_column wpb_content_element  home-sub-title active-tab">
              <div class="wpb_wrapper">
          <h4>Everything</h4>
          <p>We are doing everything for our clients</p>
              </div>
         </div>
          </div>
        </div>
      </div>
    </div>
max
  • 523
  • Вам нужно чтобы класс добавлялся за 1 сек? – Шерзод Ёров Nov 17 '17 at 11:15
  • 3 сек, но не в этом суть, как то не понятно код срабатывает, может не понятно для меня только – max Nov 17 '17 at 11:16
  • мда, поторопился я с дубликатом, попробую сейчас другой дубликат найти – Grundy Nov 17 '17 at 11:18
  • отсчет index с 0. Не совсем понятно каких именно элементов много, с классом .home-tabs или с классами home-sub-title – Grundy Nov 17 '17 at 11:20
  • на странице .home-tabs - 3, в каждом из них по 3 .home-sub-tabs и к div.home-sub-tabs добавляется .active-tab, весь код повторяется 3 раза, но может и больше – max Nov 17 '17 at 11:22
  • и что именно ты хочешь менять по setInterval? – Grundy Nov 17 '17 at 11:24
  • добавление/удаление класса .active-tab на 3 сек, по очереди – max Nov 17 '17 at 11:26
  • одновременно во всех трех home-tabs? – Grundy Nov 17 '17 at 11:30
  • да, в этом вся сложность – max Nov 17 '17 at 11:31
  • ну во первых тебе нужно ичем проходиться по "wpb_column" а не по родительскому диву тогда , он же один – Broouzer King Nov 17 '17 at 11:38
  • @BroouzerKing, он как раз не один :) – Grundy Nov 17 '17 at 11:39
  • ну по тому что я вижу он оборачивает 3 колонки с табами, там есть еще такие же структуры ? – Broouzer King Nov 17 '17 at 11:41
  • @BroouzerKing, смотри комментарии на странице .home-tabs - 3, в каждом из них по 3 .home-sub-tabs – Grundy Nov 17 '17 at 11:43
  • извиняюсь, тогда не мог бы тс еще раз сказать в чем задача нужно что бы по интервалу в 3 секунды каждой "home-sub-title "добавлялся класс "active-tab" или добавлялся каждой по очереди с интервалом в 3 секунды если по очереди то по очерди по 1 или по парно тоесть в 3 home-tabs по 1 active-tab одновременно ? – Broouzer King Nov 17 '17 at 11:47

1 Answers1

0

Если я правильно понял, то Вам нужно каждые три секунды выделять все div.home-sub-title в одном из .home-tabs. Это делается так

jQuery(document).ready(function($) {
  $('.home-tabs .wpb_column:first-child')
    .addClass('active')
    .find("div.home-sub-title")
    .addClass('active-tab');
  setInterval(function() {
    var current = $('.home-tabs .wpb_column.active').removeClass('active');
    current.find("div.home-sub-title").removeClass('active-tab');
    current.each(function() {
      var next = $(this).next();
      if (next.length === 0) {
        next = $(this).parent().find('.wpb_column:first');
      }
      next.addClass('active').find("div.home-sub-title").addClass('active-tab');
    });
  }, 3000);
});
.active-tab {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-tabs">
  <div class="wpb_column vc_column_container vc_col-sm-4">
    <div class="vc_column-inner ">
      <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element  home-sub-title">
          <div class="wpb_wrapper">
            <h4>The Best</h4>
            <p>The best barbering services you can find in your city</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wpb_column vc_column_container vc_col-sm-4">
    <div class="vc_column-inner ">
      <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element  home-sub-title">
          <div class="wpb_wrapper">
            <h4>Welcome</h4>
            <p>Welcome to Buddy Barbershop website</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wpb_column vc_column_container vc_col-sm-4">
    <div class="vc_column-inner ">
      <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element  home-sub-title">
          <div class="wpb_wrapper">
            <h4>Everything</h4>
            <p>We are doing everything for our clients</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="home-tabs">
  <div class="wpb_column vc_column_container vc_col-sm-4">
    <div class="vc_column-inner ">
      <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element  home-sub-title">
          <div class="wpb_wrapper">
            <h4>The Best</h4>
            <p>The best barbering services you can find in your city</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wpb_column vc_column_container vc_col-sm-4">
    <div class="vc_column-inner ">
      <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element  home-sub-title">
          <div class="wpb_wrapper">
            <h4>Welcome</h4>
            <p>Welcome to Buddy Barbershop website</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wpb_column vc_column_container vc_col-sm-4">
    <div class="vc_column-inner ">
      <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element  home-sub-title">
          <div class="wpb_wrapper">
            <h4>Everything</h4>
            <p>We are doing everything for our clients</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Anton Shchyrov
  • 33,121