将活动类添加到 html 元素不起作用答案

【问题标题】：Adding active class to html element doesn`t work将活动类添加到 html 元素不起作用
【发布时间】：2019-08-01 18:57:20
【问题描述】：

我正在尝试构建一个带有活动点的滑块，并且我成功完成了大部分工作，但问题是活动类没有生效。所以在 showNews 函数的末尾，我添加了那行试图添加类但没有效果。当您在当前页面显示黑点时，谁能帮助我如何将活动类添加到点？当我点击一个点转到指定页面时。[在此处输入链接描述][1]

// *Second Slider*
var sliderIndex = 0;

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

function showNews(n) {
  debugger;
  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(' red')
}

#section-three .slideshow-container2 {
  position: relative;
}

#section-three .slideshow-container2 .prev2,
#section-three .slideshow-container2 .next2 {
  height: 100px;
  color: red;
  top: 50%;
  width: 100px;
  position: absolute;
  -webkit-box-shadow: -2px 2px 0 black;
          box-shadow: -2px 2px 0 black;
}

#section-three .slideshow-container2 .next2 {
  left: 30px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#section-three .slideshow-container2 .prev2 {
  right: 30px;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

#section-three .slideshow-container2 .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 4rem;
}

#section-three .slideshow-container2 .buttons .company-btn,
#section-three .slideshow-container2 .buttons .industry-btn {
  margin: 1.5rem;
  display: inline-block;
  padding: 0.8rem 1rem;
  background: black;
  border-radius: 0;
  -webkit-transition: 0s;
  transition: 0s;
}

#section-three .slideshow-container2 .buttons .company-btn:hover {
  background: white;
  color: black;
}

#section-three .slideshow-container2 .buttons .industry-btn {
  background: white;
  color: black;
}

#section-three .slideshow-container2 .buttons .industry-btn:hover {
  background: black;
  color: white;
}

#section-three .slideshow-container2 .news-content,
#section-three .slideshow-container2 .news2-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 600px;
  background: white;
  text-align: center;
}

#section-three .slideshow-container2 .news-content p,
#section-three .slideshow-container2 .news2-content p {
  font-size: 1.2rem;
  padding: 2rem 8rem;
}

#section-three .slideshow-container2 .news-content h1,
#section-three .slideshow-container2 .news2-content h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
}

#section-three .slideshow-container2 .news2-content {
  background: white;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[3];
      grid-template-rows: repeat(3, 1fr);
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  padding: 1.5rem 6rem;
}

#section-three .slideshow-container2 .buttons {
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1/4;
  -ms-grid-row: 1;
  grid-row: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1rem;
}

#section-three .slideshow-container2 .media-room {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

#section-three .slideshow-container2 .img {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 3;
  grid-row: 3;
  margin-right: 1rem;
}

#section-three .slideshow-container2 .texter {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2/4;
  -ms-grid-row: 3;
  grid-row: 3;
  padding: 0 !important;
}

#section-three .slideshow-container2 .wiew-more {
  color: green;
  -ms-grid-row: 4;
  grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1/4;
}

#section-three .slideshow-container2 .wiew-more:hover {
  color: #242121;
}

#section-three .slideshow-container2 #dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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:black;
}

<!-- Section-three -->
  <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>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptate fugiat, molestias adipisci
            voluptas
            nisi blanditiis a aliquid accusantium omnis, soluta animi praesentium ipsam fugit? Non ea nisi optio
            dolores.voluptate fugiat, molestias adipisci voluptas
            nisi blanditiis a aliquid accusantium omnis, soluta animi praesentium ipsam fugit? Non ea nisi optio
            dolores.
          </p>
          <a class="my-2 wiew-more" href="#">WIEW MORE</a>
        </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>
          <p class="texter">London, June 2019 – If you want to enjoy wireless technology while gaming an unnoticeable
            latency is key.
            Sennheiser introduces the GSP 670, Sennheiser's first wireless gaming headset. The GSP 670 gives gamers
            significantly more freedom of movement than wired models. The audio specialist has integrated a proprietary
            low-latency connection that guarantees a reliable and stable transmission with near-zero delay. In addition,
            the GSP 670 offers Sennheiser’s renowned wearing comfort and premium audio performance.

          </p>
          <a class="my-2 wiew-more " href="#">WIEW MORE2</a>
        </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>
  <!-- Section four -->
  <section id="section-four">
    <div id="section-four-content">
      <h1>CONTACT</h1>
      <div class="IMG">
        <img src="/Core/img/logo.png" style="width: 100px" alt="logo">
      </div>
      <p>Headphone Creative Tehnology LTD</p>
      <p>ADD:No.3 Willow Road London UK Post Code:LO45FR</p>
      <ul>
        <li><a href="#">
            <p>858-5455-555</p>
            <span><i class="fas fa-phone-volume"></i></span>
            <p>SERVICE HOTLINE</p>
          </a></li>
        <li><a href="#">
            <p>the_voice@yahoo.com</p>
            <span><i class="far fa-envelope"></i></span>
            <p>E-MAIL</p>
          </a></li>
        <li><a href="#">
            <p>0738-5455-5325</p>
            <span><i class="fas fa-phone-volume"></i></span>
            <p>TELEPHONE</p>
          </a></li>
        <li><a href="#">
            <p>32 221-5464895</p>
            <span><i class="fas fa-phone-volume"></i></span>
            <p>FAX</p>
          </a></li>
        <li><a href="#">
            <p>the_voice</p>
            <span><i class="fab fa-skype"></i></span>
            <p>SKYPE</p>
          </a></li>
      </ul>
    </div>
  </section>

【问题讨论】：

请将相关代码作为minimal reproducible example添加到您的问题中，作为edit添加到您的问题中，而不是指向场外资源的链接。
演示很棒，但仅作为对问题中实际存在的内容的支持。我们不必离开现场对您的问题进行初步审查。问题应该是自包含的
下次您提出问题时，请确保一切都已连接并清洁，以便于协助。你的课堂作业有一个空间，你的滑块没有调用showNews，屏幕上有太多额外的东西，很难知道你应该看什么。在发布之前，您可以减少很多很多。话虽这么说，你是新来的——所以我明白了！欢迎！但请尽量保持礼貌:)

标签： javascript function events

【解决方案1】：

答案：

使用模块化创建一个圆形数组点。

 (index + movement + length) % length

为了实现这一点，当第一次调用 showNews 函数时，我们在其中存储了一个 active 索引。 this.active最初是0，如果未定义，则分配给上面公式的结果。

  if(this.active === undefined) this.active = 0;
  this.active = ( this.active + n + dots.length) % dots.length;
  dots[this.active].classList.add("active");

这个设置基本上使得showNews(-1) 将向左移动一个或向最右侧移动一圈。 showNews(1) 将向右移动一圈或向左移动一圈。

一旦我们将这些附加到您的 next2 和 prev2 按钮上，瞧。

示例：

// *Second Slider*
var sliderIndex = 0;

let next2 = document.querySelector(".next2");
let prev2 = document.querySelector(".prev2");
next2.addEventListener("click", function() { showNews(1); });
prev2.addEventListener("click", function() { showNews(-1); });
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].classList.remove("active");
  }
  
  if(this.active === undefined) this.active = 0;
  this.active = ( this.active + n + dots.length) % dots.length;
  dots[this.active].classList.add("active");
  
  slider[sliderIndex].style.display = 'block';
  dots[sliderIndex].classList.add('red')
}

#section-three .slideshow-container2 {
  position: relative;
}

#section-three .slideshow-container2 .prev2,
#section-three .slideshow-container2 .next2 {
  height: 100px;
  color: red;
  top: 50%;
  width: 100px;
  position: absolute;
  -webkit-box-shadow: -2px 2px 0 black;
          box-shadow: -2px 2px 0 black;
}

#section-three .slideshow-container2 .next2 {
  left: 30px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#section-three .slideshow-container2 .prev2 {
  right: 30px;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

#section-three .slideshow-container2 .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 4rem;
}

#section-three .slideshow-container2 .buttons .company-btn,
#section-three .slideshow-container2 .buttons .industry-btn {
  margin: 1.5rem;
  display: inline-block;
  padding: 0.8rem 1rem;
  background: black;
  border-radius: 0;
  -webkit-transition: 0s;
  transition: 0s;
}

#section-three .slideshow-container2 .buttons .company-btn:hover {
  background: white;
  color: black;
}

#section-three .slideshow-container2 .buttons .industry-btn {
  background: white;
  color: black;
}

#section-three .slideshow-container2 .buttons .industry-btn:hover {
  background: black;
  color: white;
}

#section-three .slideshow-container2 .news-content,
#section-three .slideshow-container2 .news2-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 600px;
  background: white;
  text-align: center;
}

#section-three .slideshow-container2 .news-content p,
#section-three .slideshow-container2 .news2-content p {
  font-size: 1.2rem;
  padding: 2rem 8rem;
}

#section-three .slideshow-container2 .news-content h1,
#section-three .slideshow-container2 .news2-content h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
}

#section-three .slideshow-container2 .news2-content {
  background: white;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[3];
      grid-template-rows: repeat(3, 1fr);
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  padding: 1.5rem 6rem;
}

#section-three .slideshow-container2 .buttons {
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1/4;
  -ms-grid-row: 1;
  grid-row: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1rem;
}

#section-three .slideshow-container2 .media-room {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

#section-three .slideshow-container2 .img {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 3;
  grid-row: 3;
  margin-right: 1rem;
}

#section-three .slideshow-container2 .texter {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2/4;
  -ms-grid-row: 3;
  grid-row: 3;
  padding: 0 !important;
}

#section-three .slideshow-container2 .wiew-more {
  color: green;
  -ms-grid-row: 4;
  grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1/4;
}

#section-three .slideshow-container2 .wiew-more:hover {
  color: #242121;
}

#section-three .slideshow-container2 #dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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:black;
}

<!-- Section-three -->
  <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>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptate fugiat, molestias adipisci
            voluptas
            nisi blanditiis a aliquid accusantium omnis, soluta animi praesentium ipsam fugit? Non ea nisi optio
            dolores.voluptate fugiat, molestias adipisci voluptas
            nisi blanditiis a aliquid accusantium omnis, soluta animi praesentium ipsam fugit? Non ea nisi optio
            dolores.
          </p>
          <a class="my-2 wiew-more" href="#">WIEW MORE</a>
        </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>
          <p class="texter">London, June 2019 – If you want to enjoy wireless technology while gaming an unnoticeable
            latency is key.
            Sennheiser introduces the GSP 670, Sennheiser's first wireless gaming headset. The GSP 670 gives gamers
            significantly more freedom of movement than wired models. The audio specialist has integrated a proprietary
            low-latency connection that guarantees a reliable and stable transmission with near-zero delay. In addition,
            the GSP 670 offers Sennheiser’s renowned wearing comfort and premium audio performance.

          </p>
          <a class="my-2 wiew-more " href="#">WIEW MORE2</a>
        </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>
  <!-- Section four -->
  <section id="section-four">
    <div id="section-four-content">
      <h1>CONTACT</h1>
      <div class="IMG">
        <img src="/Core/img/logo.png" style="width: 100px" alt="logo">
      </div>
      <p>Headphone Creative Tehnology LTD</p>
      <p>ADD:No.3 Willow Road London UK Post Code:LO45FR</p>
      <ul>
        <li><a href="#">
            <p>858-5455-555</p>
            <span><i class="fas fa-phone-volume"></i></span>
            <p>SERVICE HOTLINE</p>
          </a></li>
        <li><a href="#">
            <p>the_voice@yahoo.com</p>
            <span><i class="far fa-envelope"></i></span>
            <p>E-MAIL</p>
          </a></li>
        <li><a href="#">
            <p>0738-5455-5325</p>
            <span><i class="fas fa-phone-volume"></i></span>
            <p>TELEPHONE</p>
          </a></li>
        <li><a href="#">
            <p>32 221-5464895</p>
            <span><i class="fas fa-phone-volume"></i></span>
            <p>FAX</p>
          </a></li>
        <li><a href="#">
            <p>the_voice</p>
            <span><i class="fab fa-skype"></i></span>
            <p>SKYPE</p>
          </a></li>
      </ul>
    </div>
  </section>

旁白：

这段代码真的很乱

【讨论】：