如何循环遍历 HTML 元素

Question

此代码使得当用户单击其中一种颜色 (color1-4) 时，它会设置所有鞋子 none 的 CSS display 属性，但单击的颜色除外，其 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 arrays
colorShoe = (shoe) =>{
  for(let i=0; i<shoes.length;i++){
    if(shoes[i] === shoe){
      //Handling style
    }
}

Answer 2

请检查一下，看看你是否可以像下面这样修改你的代码：

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

Answer 3

如果你不想使用数组，你可以这样做。只需使用 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');
    });