javascript - 无法在 javascript 中向我的元素添加活动状态

Question

所以我尝试制作一个类似于 w3schools 的功能。该功能需要管理两件事。1. 调用当前页面时，将“.active”类添加到一个点上。2.当用户点击点进入该页面时。

在我的代码中，如果我在通过函数 Example(dots[sliderIndex].classList.add("active");) 添加类时留出一些空间，现在它可以单击并转到该页面，但如果我削减空间（点[sliderIndex].classList.add("active");) 现在显示活动状态，但单击点不起作用。这让我很困惑......请各位，如果你能向我解释背后的逻辑以及如何使这项工作发挥作用。

var sliderIndex = 0;

let next2 = document.querySelector(".next2");
let prev2 = document.querySelector(".prev2");

function showNews(n) {
  const slider = document.getElementsByClassName("news");
  const dots = document.getElementsByClassName("dot");
  for (i = 0; i < slider.length; i++) {
    slider[i].style.display = "none";
  }
  if (n < 0) {
    sliderIndex = slider.length - 1;
  }
  if (n > slider.length - 1) {
    sliderIndex = 0;
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", " ");
  }
  slider[sliderIndex].style.display = "block";
  dots[sliderIndex].classList.add(" active");
}

function currentSlide(n) {
  showNews((sliderIndex = n));
}

function incrementSlides2(n) {
  showNews((sliderIndex += n));
}
next2.addEventListener("click", function() {
  incrementSlides2(1);
});
prev2.addEventListener("click", function() {
  incrementSlides2(-1);
});

showNews(sliderIndex);

#section-three .slideshow-container2 #dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 
 justify-content: center;
}

#section-three .slideshow-container2 .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  -webkit-transition: background-color 0.6s ease;
  transition: background-color 0.6s ease;
}

#section-three .slideshow-container2 .dot:hover,
#section-three .slideshow-container2 .dot.active {
  background: black;
}

.active{background:red}

<section id="section-three">
    <div class="container slideshow-container2">
      <div class="news">
        <div class="news-content">
          <div class="buttons">
            <a class="btn company-btn" href="#">COMPANY NEWS</a>
            <a class="btn industry-btn" href="#">INDUSTRY NEWS</a>
          </div>
          <h1>OUR PEOPLE ARE OUT STONGEST ASSET </h1>
          
     
        </div>
      </div>
      <div class="news news2">
        <div class="news2-content">
          <div class="buttons">
            <a class="btn company-btn" href="#">COMPANY NEWS</a>
            <a class="btn industry-btn" href="#">INDUSTRY NEWS</a>
          </div>
          <h1 class="media-room">MEDIA ROOM </h1>
          <div class="img">
            <img src="/Core/img/media.jpg" style="width:500px" alt="">
          </div>
         
          
        </div>
      </div>
      <div id="dots">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
      </div>
      <a href="javascript:void(0);" class="prev2"></a>
      <a href="javascript:void(0);" class="next2"></a>
    </div>
  </section>

标签： javascriptcssfunctionclass