如何循环遍历 HTML 元素

Question

此代码使得当用户单击其中一种颜色 (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');

});

Answer 1

您需要使用 Array 和自定义函数来操作 DOM 元素，这是一个基本示例：var shoes = [s1,s2,s3]; //DOM element arrayscolorShoe = (shoe) =>{&nbsp; for(let i=0; i<shoes.length;i++){&nbsp; &nbsp; if(shoes[i] === shoe){&nbsp; &nbsp; &nbsp; //Handling style&nbsp; &nbsp; }}

Answer 2

如果你不想使用 array ，你可以这样做。只需使用 window['var name'+the index number] 然后你可以在后面添加你想做的事情 :D 谢谢 :Dcolor3.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 1; i <= 5; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i == 3) shoe.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window['shoe'+i].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; console.log('u removed it and added another');&nbsp; &nbsp; });&nbsp; &nbsp; color4.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 1; i <= 5; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i == 4) shoe.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window['shoe'+i].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; console.log('u removed it and added another');&nbsp; &nbsp; });&nbsp; &nbsp; color1.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 1; i <= 5; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i == 1) shoe.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window['shoe'+i].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; console.log('u removed it and added another');&nbsp; &nbsp; });

Answer 3

请检查一下，看看您是否可以像下面这样修改您的代码：const colorList = [color1, color2, color3]; // you can add moreconst shoeList = [shoe1, shoe2, shoe3]; // you can add more[color1, color2, color3].forEach((color, colorIndex) => {&nbsp; color.addEventListener('click', () => {&nbsp; &nbsp; shoeList.forEach((shoe, shoeIndex) => {&nbsp; &nbsp; &nbsp; if (colorIndex === shoeIndex) {&nbsp; &nbsp; &nbsp; &nbsp; shoe.style.display = "block";&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; shoe.style.display = "none";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});