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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何循環(huán)遍歷 HTML 元素

如何循環(huán)遍歷 HTML 元素

滄海一幻覺(jué) 2023-06-09 10:53:57
此代碼使得當(dāng)用戶(hù)單擊其中一種顏色 (color1-4) 時(shí)，它會(huì)設(shè)置display所有鞋子的 CSS 屬性，none但單擊的顏色除外，其display設(shè)置為block. 代碼看起來(lái)很臟，雇主不會(huì)批準(zhǔn)。我將如何著手制作一個(gè) for 循環(huán)，或者以其他方式使代碼更清晰？color2.addEventListener('click', () => {    shoe.style.display = "none";    shoe3.style.display = "none";    shoe5.style.display = "none";    shoe2.style.display = "block";    console.log('u removed it and added another');});color3.addEventListener('click', () => {    shoe.style.display = "none";    shoe3.style.display = "none";    shoe5.style.display = "none";    shoe2.style.display = "none";    shoe3.style.display = "block";    console.log('u removed it and added another');});color4.addEventListener('click', () => {    shoe.style.display = "none";    shoe3.style.display = "none";    shoe5.style.display = "none";    shoe3.style.display = "none";    shoe5.style.display = "block";    console.log('u removed it and added another');});color1.addEventListener('click', () => {    shoe.style.display = "block";    shoe2.style.display = "none";    shoe3.style.display = "none";    shoe4.style.display = "none";    shoe5.style.display = "none";    console.log('u removed it and added another');});color2.addEventListener('click', () => {    shoe.style.display = "none";    shoe3.style.display = "none";    shoe5.style.display = "none";    shoe2.style.display = "block";    console.log('u removed it and added another');});
查看完整描述

3 回答

?
繁花不似錦

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊

您需要使用 Array 和自定義函數(shù)來(lái)操作 DOM 元素，這是一個(gè)基本示例：


var shoes = [s1,s2,s3]; //DOM element arrays

colorShoe = (shoe) =>{

  for(let i=0; i<shoes.length;i++){

    if(shoes[i] === shoe){

      //Handling style

    }

}


查看完整回答
反對(duì) 回復(fù) 2023-06-09
?
慕桂英546537

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超10個(gè)贊

如果你不想使用 array ，你可以這樣做。只需使用 window['var name'+the index number] 然后你可以在后面添加你想做的事情 :D 謝謝 :D


color3.addEventListener('click', () => {

        for (var i = 1; i <= 5; i++) {

            if (i == 3) shoe.style.display = "block";

            else {

                window['shoe'+i].style.display = "none";

            }

        }

        console.log('u removed it and added another');

    });


    color4.addEventListener('click', () => {

        for (var i = 1; i <= 5; i++) {

            if (i == 4) shoe.style.display = "block";

            else {

                window['shoe'+i].style.display = "none";

            }

        }

        console.log('u removed it and added another');

    });


    color1.addEventListener('click', () => {

        for (var i = 1; i <= 5; i++) {

            if (i == 1) shoe.style.display = "block";

            else {

                window['shoe'+i].style.display = "none";

            }

        }

        console.log('u removed it and added another');

    });


查看完整回答
反對(duì) 回復(fù) 2023-06-09
?
寶慕林4294392

TA貢獻(xiàn)2021條經(jīng)驗(yàn) 獲得超8個(gè)贊

請(qǐng)檢查一下，看看您是否可以像下面這樣修改您的代碼：


const colorList = [color1, color2, color3]; // you can add more

const shoeList = [shoe1, shoe2, shoe3]; // you can add more

[color1, color2, color3].forEach((color, colorIndex) => {

  color.addEventListener('click', () => {

    shoeList.forEach((shoe, shoeIndex) => {

      if (colorIndex === shoeIndex) {

        shoe.style.display = "block";

      } else {

        shoe.style.display = "none";

      }

    });

  });

});


查看完整回答
反對(duì) 回復(fù) 2023-06-09
  • 3 回答
  • 0 關(guān)注
  • 229 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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