如何用if语句隐藏除指定产品卡片外的所有元素？（响应式轮播）

需求说明 #

• 屏幕宽度小于600px时，仅显示单个产品卡片，其余卡片隐藏
• 实现轮播功能，点击切换按钮可展示不同的产品卡片

遇到的问题 #

尝试以下两段JS代码实现时出现异常：

1. 第一段代码无法隐藏多余的产品卡片
2. 第二段代码会错误隐藏首个产品卡片

尝试的代码 #

第一段代码：

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

问题原因分析 #

1. getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM元素，因此productCard !== productIndex这个判断永远为true（集合和单个元素不可能相等）
2. 第一段代码中，直接给productCard（集合）设置style.display无效，因为集合本身没有style属性，必须遍历集合中的每个元素
3. 第二段代码中，由于判断永远为真，会直接隐藏作为默认显示项的productIndex

正确实现方案 #

步骤1：媒体查询+监听屏幕变化 #

通过matchMedia监听屏幕宽度，仅在小于600px时执行轮播逻辑，大于等于600px时恢复所有卡片显示

步骤2：遍历卡片控制显示/隐藏 #

遍历所有产品卡片，默认只显示首个，其余隐藏

步骤3：实现轮播切换逻辑 #

给左右切换按钮绑定点击事件，切换当前显示的卡片索引，控制对应卡片显示，其余隐藏

完整代码示例 #

HTML结构

<div class="product-container">
  <button class="carousel-btn prev-btn">←</button>
  <div class="product-card">产品卡片1</div>
  <div class="product-card">产品卡片2</div>
  <div class="product-card">产品卡片3</div>
  <button class="carousel-btn next-btn">→</button>
</div>

CSS样式

.product-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.product-card {
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
  cursor: pointer;
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/* 大于等于600px时显示所有卡片，隐藏轮播按钮 */
@media (min-width: 600px) {
  .carousel-btn {
    display: none;
  }
}

JavaScript逻辑

// 获取DOM元素
const productCards = document.getElementsByClassName("product-card");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
let currentIndex = 0;

// 媒体查询监听
const mobileQuery = window.matchMedia("(max-width: 599px)");

// 初始化卡片显示状态
function initCarousel() {
  if (mobileQuery.matches) {
    // 移动端：仅显示当前索引卡片
    for (let i = 0; i < productCards.length; i++) {
      productCards[i].style.display = i === currentIndex ? "block" : "none";
    }
    // 显示轮播按钮
    prevBtn.style.display = "block";
    nextBtn.style.display = "block";
  } else {
    // 桌面端：显示所有卡片，隐藏按钮
    for (let card of productCards) {
      card.style.display = "block";
    }
    prevBtn.style.display = "none";
    nextBtn.style.display = "none";
  }
}

// 切换卡片函数
function changeCard(direction) {
  if (!mobileQuery.matches) return;
  
  // 隐藏当前卡片
  productCards[currentIndex].style.display = "none";
  
  // 更新索引
  currentIndex += direction;
  // 循环边界处理
  if (currentIndex < 0) {
    currentIndex = productCards.length - 1;
  } else if (currentIndex >= productCards.length) {
    currentIndex = 0;
  }
  
  // 显示新卡片
  productCards[currentIndex].style.display = "block";
}

// 绑定事件
prevBtn.addEventListener("click", () => changeCard(-1));
nextBtn.addEventListener("click", () => changeCard(1));
mobileQuery.addEventListener("change", initCarousel);

// 页面加载时初始化
window.addEventListener("load", initCarousel);

内容的提问来源于stack exchange，提问作者TiredOfBeingBroke