将jQuery的siblings功能转为原生JavaScript，解决指示点激活态切换异常问题

问题原因 #

• document.getElementsByClassName('bullets') 返回的是匹配所有类名为bullets的DOM元素集合（HTMLCollection类数组对象），集合本身没有parentElement属性，调用bullets.parentElement会返回undefined，后续获取兄弟元素的逻辑直接失效。
• 执行顺序颠倒：你先给目标元素添加active类，再遍历所有元素移除active类，会把刚添加的类也同步删掉，等于添加逻辑被覆盖。

修正方案 #

方案1（基于父级兄弟节点处理） #

调整属性调用逻辑和执行顺序即可，完整代码如下：

const right = document.querySelector('.right');
const bullets = document.getElementsByClassName('bullets');
right.addEventListener('click', function(){
  const has = document.querySelector('.swiper-pagination-bullet-active').getAttribute('aria-label');
  const idx = Number(has.substr(12,1)) - 1;
  // 先取当前单个bullet元素的父级
  const parent = bullets[idx].parentElement;
  // 先遍历移除所有子元素的active类
  for(let sib of parent.children) {
    sib.classList.remove('active');
  }
  // 最后给目标元素添加active类
  bullets[idx].classList.add('active');
});

方案2（不依赖父级结构，更通用） #

如果你的bullets元素可能分布在不同父容器下，直接遍历所有bullets元素过滤处理即可：

const right = document.querySelector('.right');
const bullets = document.getElementsByClassName('bullets');
right.addEventListener('click', function(){
  const has = document.querySelector('.swiper-pagination-bullet-active').getAttribute('aria-label');
  const idx = Number(has.substr(12,1)) - 1;
  // 遍历所有bullets，排除当前目标元素后移除active
  for (let i = 0; i < bullets.length; i++) {
    if (i !== idx) {
      bullets[i].classList.remove('active');
    }
  }
  bullets[idx].classList.add('active');
});

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