有没有办法显示：无；除一个元素外的所有元素都使用 if 语句？

Question

尝试隐藏除一张产品卡之外的所有产品卡，以便单击轮播按钮时可以将显示的一张产品卡变成轮播以显示隐藏的产品卡。

仅当屏幕尺寸小于 600px 时，产品卡片才会隐藏（请参阅媒体查询）

Javascript

let productIndex = document.getElementsByClassName("product-card")[0];
let productCard = document.getElementsByClassName("product-card");


if (productCard !== productIndex) {
productCard.style.display = "none";
}

上面的代码块不会隐藏产品卡，但是

if (productCard !== productIndex) {
productIndex.style.display = "none";
}

将隐藏第一个产品。

jsfiddle 在这里可用

Answer 1

在小提琴中，我看到 5 张产品卡。如果您只想在屏幕宽度小于 600px 时隐藏除第一个之外的所有内容，那么这样的操作就可以了：

window.addEventListener('resize', resize);

function resize() {
  let productCards = document.getElementsByClassName("product-card");
  if (window.innerWidth < 600) {
    for (var i = 1; i < productCards.length; i++) {
      productCards[i].style.display = "none";
    }
  } else {
    for (var i = 1; i < productCards.length; i++) {
      productCards[i].style.display = "inherit";
    }
  }
}

抓取卡片集合，从第二个元素开始循环遍历它们，并根据屏幕宽度应用样式。事件监听器使其响应。