Question

我正在学习JavaScript。在以下示例中，我尝试

遍历列表项以获取其原始类
更改它。（具有红色类别的列表项将变为绿色类别，反之反之亦然）

我还想不断对其进行更改以获得动画效果。如何将javascript和jQuery一起添加？

我需要为每个列表项设置超时时间吗？

*<style>*
  .red{
        color:red;
    } 
    .green{
        color:green;
    }
*</style>*        




*<body>*
<ul class="list-inline-mb-0 ">
          <li  class="list-inline-item header red">C </li>
          <li class="list-inline-item header green">O</li> 
          <li class="list-inline-item header red">O</li> 
          <li class="list-inline-item header green">L</li> 

</ul>
*</body>*


*<script>*
  $(function()) {

    var myListElem = document.getElementsByClassName('li');

    $('li').each(function() {
    if(myListElem).hasClass("red"){           
     $(myListElem).addClass('green');
         }
    else{
        $(myListElem).addClass('red')
    }

    });  
*</script>*

Answer 1

首先，li不是类-list-inline-item是类。其次，您不尝试在$('li').each(function()...处遍历数组，因为$('li')并不是获取元素的方式。第三，即使修复循环并添加重复（setInterval()）也不会给您动画效果，因为您只是添加类而不是删除它们。在您的示例中，当您检查red时，仅添加green并得到red green作为结果类。总结所有人所说的话，这样的事情就可以做到：

$(function() {

    var myListElem = document.getElementsByClassName('list-inline-item');
		setInterval(function(){
    for(let i = 0; i < myListElem.length; i++){
    let e = myListElem[i];
      if($(e).hasClass("red")){           
       $(e).addClass('green');
       $(e).removeClass('red');
           }
      else{
          $(e).removeClass('green');
          $(e).addClass('red');
      }
    }
	}, 3000);
  });

.red{
        color:red;
    } 
    .green{
        color:green;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline-mb-0 ">
          <li  class="list-inline-item header red">C </li>
          <li class="list-inline-item header green">O</li> 
          <li class="list-inline-item header red">O</li> 
          <li class="list-inline-item header green">L</li> 

</ul>

如何遍历列表并应用jQuery更改类

1 个答案: