setInterval toggleClass jQuery, что-то пошло не так

318

18 ноября 2017, 12:56

Наверное из-за такой структуры не могу понять, почему неправильно работает, класс добавляется произвольно и не на 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>

Answer 1

Если я правильно понял, то Вам нужно каждые три секунды выделять все 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>