如何遍历列表并应用 jQuery 来更改类
我正在学习 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>*
慕丝72912551回答
-
狐的传说
首先，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>
随时随地看视频慕课网APP
相关分类
JavaScript