Javascript /添加类到间隔的元素

Question

Javascript不是我的强项，所以我正在寻求帮助：你如何编写一个函数，将一个Class添加到具有间隔的3个元素？

 <ul>
   <li class="panel">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>

想法是在文档准备就绪时在第1个项目上添加.--active类，并在2秒后将其删除以将其添加到第2个项目，依此类推。

Answer 1

如果你正在使用jQuery，你可以使用li遍历index，并在到达最后li时将索引重置为0元素：

if( $('li.panel.active').index() == lis_count-1 )
    active_li_index  = 0;
else
    active_li_index++;

希望这有帮助。

jQuery解决方案：

＆＃13;

＆＃13;

$(function(){
   var lis_count = $('li.panel').length;
   var active_li_index = 0;
   
   setInterval(function(){
      if( $('li.panel.active').index() == lis_count-1 )
        active_li_index  = 0;
      else
        active_li_index++;
        
      $('li.panel.active').removeClass('active');
      $('li.panel').eq(active_li_index).addClass('active');
   }, 1000);
})

＆＃13;

.active{
   background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li class="panel active">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>

＆＃13;

＆＃13;

＆＃13;

纯JS解决方案：

＆＃13;

＆＃13;

document.addEventListener('DOMContentLoaded', function(){ 
   var lis = Array.prototype.slice.call( document.querySelectorAll('li.panel'));
   var lis_count = lis.length;
   var active_li_index = 0;
   
   setInterval(function(){
      var active_li = document.querySelector('li.panel.active');
      
      if( lis.indexOf(active_li) == lis_count-1 )
        active_li_index  = 0;
      else
        active_li_index++;
        
      active_li.classList.remove('active');
      document.querySelectorAll('li.panel')[active_li_index].classList.add('active');
   }, 1000);
}, false);

＆＃13;

.active{
   background-color: yellow;
}

＆＃13;

<ul>
   <li class="panel active">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为你使用jQuery，你可以这样做：

jQuery(() => { // callback when DOM is ready
  $('.panel1').addClass('active'); // add your class

  setTimeout(() => { // function that execute the callback after 2000ms (2s)
   $('.panel1).removeClass('active'); // remove your class active
  }, 2000);
});

你应该为你的不同div使用不同的类

Answer 3

window.addEventListener("load",function change(i=0){
  var els=document.getElementsByClassName("panel");
  if(els[i-1]) els[i-1].classList.toggle("active");
  els[i].classList.toggle("active");
  if(i<els.length-1) setTimeout(change,2000,i+1);
});

你可以使用递归方法慢慢迭代类元素并切换它们的活动类......

Answer 4

你可以使用这样的东西，你需要用你想要开始的索引来调用toggleClass，函数addClass和removeClass支持多个元素和多个类。

// Add class to element
// support multiple classes
function addClass(elements, className){
  // split classes 
  var classArray = className.split(' ');
  var els = [];
  
  // If element does not have length property
  if(elements.length == undefined)
  	els[0] = elements
  else
  	els = elements;
  
  for(e=0; e<els.length; e++){
  	var element = els[e];
    for(i=0; i<classArray.length; i++){
      if(element.className.indexOf(classArray[i])==-1){
        element.className += ' ' + classArray[i];
      }
    }
  }
}

// Remove class to element
// support multiple classes
function removeClass(elements, className){
	var classArray = className.split(' ');
  var els = [];
  
  // If elements does not have length property
  if(elements.length == undefined)
  	els[0] = elements
  else
  	els = elements;
    
  for(e=0; e<els.length; e++){
  	var element = els[e];
    for(i= 0; i<classArray.length; i++){
      element.className = element.className.replace(classArray[i], '').trim();
    }
  }
}

function toggleClass(index){	
  // get active elements and remove active class
  removeClass(document.getElementsByClassName('active'), 'active');
  
  // add class to element at index
  addClass(document.getElementsByClassName('panel')[index], 'active');
  
  // test if index should increment or reset
  if(index<document.getElementsByClassName('panel').length - 1){
  	index++;
  }else{
  	index = 0;
  }
  
  // wait 2sec until execute toggleClass again
  setTimeout(toggleClass, 2000, index);
}

toggleClass(0);

.active {
  color: green;
}

 <ul>
   <li class="panel">Item 1</li>
   <li class="panel active">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>

修改：请注意方法classList，因为您需要polyfill才能获得浏览器兼容性

Answer 5

没有jQuery：

function showGarland () {
  var itemClass   = 'panel';
  var activeClass = '--active';
  var wait        = 2000; // 2 seconds
 
  function toggleActive (element, index, maxIndex) {
    setTimeout(function(){
     element.classList.add(activeClass);
      setTimeout(function(){
        element.classList.remove(activeClass);
        if (index == maxIndex) {
          runLoop();
        }
      }, wait);
    }, wait * index);  
  }

  function runLoop () {
    var allItems = document.getElementsByClassName(itemClass);
 
    for (var index = 0; index < allItems.length; index++) {
      var element = allItems[index];
      toggleActive(element, index, allItems.length - 1);
    }
  }
  
  runLoop();
}

window.addEventListener('load', showGarland);

.--active {
  color:red;
} 

 <ul>
   <li class="panel">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>

Answer 6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- <div class="hide">
 text
</div> -->
<ul id="Items">
   <li class="panel">Item 1</li>
   <li class="panel hide">Item 2</li>
   <li class="panel hide">Item 3</li>
 </ul>
<style>

.hide{  
    visibility: hidden;
}

</style>
<script>
$(document).ready(function() {

 var listItems = $("#Items li");
// alert(listItems);
listItems.each(function(idx, li) {
    var product = $(li);	
    setInterval(function(){ 
	product.css( "visibility", "visible" );		
$(li).next().css( "visibility", "hidden" );	
$(li).prev().css( "visibility", "hidden" );		
  
}, 2000);
});
});
</script>

上面的一个适用于两个元素，但对于第三个元素，它很快显示而不显示第二个元素。

Answer 7

没有 jQuery：

function showGarland () {
  var itemClass   = 'panel';
  var activeClass = '--active';
  var wait        = 2000; // 2 seconds
 
  function toggleActive (element, index, maxIndex) {
    setTimeout(function(){
     element.classList.add(activeClass);
      setTimeout(function(){
        element.classList.remove(activeClass);
        if (index == maxIndex) {
          runLoop();
        }
      }, wait);
    }, wait * index);  
  }

  function runLoop () {
    var allItems = document.getElementsByClassName(itemClass);
 
    for (var index = 0; index < allItems.length; index++) {
      var element = allItems[index];
      toggleActive(element, index, allItems.length - 1);
    }
  }
  
  runLoop();
}

window.addEventListener('load', showGarland);

.--active {
  color:red;
} 

 <ul>
   <li class="panel">Item 1</li>
   <li class="panel">Item 2</li>
   <li class="panel">Item 3</li>
 </ul>