Javascript / 将 class 添加到具有间隔的元素

Question

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

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

想法是在文档准备好后在第一项上添加 .--active class，并在 2 秒后将其删除以将其添加到第二项，依此类推。

Answer 1

因为你使用 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);
});

你应该使用不同的 class 作为你的差异 div

Answer 2

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

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

希望对您有所帮助。

jQuery解法：

$(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);
})

.active{
   background-color: yellow;
}

<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>

纯JS解决方案：

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);

.active{
   background-color: yellow;
}

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

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);
});

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

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>

Javascript / 将 class 添加到具有间隔的元素

Javascript / Add class to element with interval

html

javascript

intervals