求助：实现点击指示器时卡片轮播（Carousel）的联动切换功能

问题：制作卡片轮播时，点击指示器或卡片，无法实现两者同步切换状态，需要修复该功能。

原代码问题分析 #

1. 循环中使用全局变量i，导致事件绑定后索引混乱
2. 点击指示器仅切换自身activo类，未同步对应卡片；点击卡片仅切换自身，未同步对应指示器
3. clase_activo函数逻辑是切换当前元素状态，不符合“切换到指定项”的需求

修改后的完整代码 #

HTML（调整类名，避免纯数字类名）

<section class='product-list'>
  <h1>productos</h1>
  <div class='product-container'>
    <div class='card card-1 activo'></div>
    <div class='card card-2'></div>
    <div class='card card-3'></div>
    <div class='card card-4'></div>
  </div>
  <div class='secciones'>
    <div class='punto punto-1 activo'></div>
    <div class='punto punto-2'></div>
    <div class='punto punto-3'></div>
    <div class='punto punto-4'></div>
  </div>
</section>

CSS（保留原样式）

.product-list {
  background: #dfe6e9;
  padding: 3em;
}

.product-list .card {
  background: white;
  border-radius: 10px;
  padding: 1em;
  box-shadow: 0px 10px 5px #b2bec3;
  text-align: center;
  font-family: 'SpaceGrotesk-medium';
}

.card {
  height: 300px;
}

.product-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 40px;
}

.secciones {
  display: flex;
  align-items: center;
  justify-content: center;
}

.punto {
  background: #b4f028;
  height: 10px;
  width: 30px;
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 2px;
}

.punto.activo {
  background: #f07e28;
}

.card.activo {
  background: #f07e28;
}

JavaScript（核心修改实现同步）

const cards = document.querySelectorAll('.card');
const dots = document.querySelectorAll('.secciones .punto');

// 绑定指示器点击事件
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    // 移除所有卡片和指示器的active类
    cards.forEach(card => card.classList.remove('activo'));
    dots.forEach(d => d.classList.remove('activo'));
    // 给对应索引的卡片和指示器添加active类
    cards[index].classList.add('activo');
    dot.classList.add('activo');
  });
});

// 绑定卡片点击事件
cards.forEach((card, index) => {
  card.addEventListener('click', () => {
    // 移除所有卡片和指示器的active类
    cards.forEach(c => c.classList.remove('activo'));
    dots.forEach(dot => dot.classList.remove('activo'));
    // 给对应索引的卡片和指示器添加active类
    card.classList.add('activo');
    dots[index].classList.add('activo');
  });
});

关键修改说明 #

1. 使用forEach遍历绑定事件，避免全局变量i导致的索引错误
2. 点击任一元素时，先统一移除所有卡片和指示器的activo类，再给对应索引的元素添加该类，确保状态完全同步
3. 移除冗余的clase_activo函数，改用直接操作类名的方式，逻辑更清晰直接

内容的提问来源于stack exchange，提问作者A P I