第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何遍歷列表并應(yīng)用 jQuery 來更改類

如何遍歷列表并應(yīng)用 jQuery 來更改類

慕絲7291255 2022-10-08 15:45:11
我正在學(xué)習(xí) JavaScript。在下面的例子中，我試圖循環(huán)列表項(xiàng)以獲取其原始類更改。（具有紅色類的列表項(xiàng)將變?yōu)榫G色類，反之亦然）我也想不斷地改變它以獲得動畫效果。如何將javascript和jQuery一起添加？我需要為每個列表項(xiàng)設(shè)置超時嗎？*<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>*
查看完整描述

1 回答

?
狐的傳說

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個贊

首先，li不是一個類——list-inline-item是。其次，您不是在嘗試遍歷數(shù)組$('li').each(function()...，因?yàn)?('li')這不是您獲取元素的方式。第三，即使修復(fù)循環(huán)并添加重復(fù) ( setInterval()) 也不會給您動畫，因?yàn)槟皇翘砑宇惗皇莿h除它們。在您的示例中，當(dāng)您檢查red您時，然后添加green并獲得red green結(jié)果類?？偨Y(jié)所有所說的事情，這樣的事情會做：


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


查看完整回答
反對 回復(fù) 2022-10-08
  • 1 回答
  • 0 關(guān)注
  • 169 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號