首頁猿問如何循環遍歷 HTML 元素

如何循環遍歷 HTML 元素

JavaScript

滄海一幻覺 2023-06-09 10:53:57

此代碼使得當用戶單擊其中一種顏色 (color1-4) 時，它會設置display所有鞋子的 CSS 屬性，none但單擊的顏色除外，其display設置為block. 代碼看起來很臟，雇主不會批準。我將如何著手制作一個 for 循環，或者以其他方式使代碼更清晰？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貢獻1851條經驗獲得超4個贊

您需要使用 Array 和自定義函數來操作 DOM 元素，這是一個基本示例：

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

colorShoe = (shoe) =>{

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

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

//Handling style

}

反對回復 2023-06-09

慕桂英546537

TA貢獻1848條經驗獲得超10個贊

如果你不想使用 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');

});

反對回復 2023-06-09

寶慕林4294392

TA貢獻2021條經驗獲得超8個贊

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

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

}

});

反對回復 2023-06-09

3 回答
0 關注
235 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何循環遍歷 HTML 元素

如何循環遍歷 HTML 元素

3 回答

添加回答