Javascript 单击添加活动类进行分页

在我的幻灯片中，我想在单击每个分页按钮时添加和删除一个活动类。如何使用原生JS实现这一点。到目前为止，我的代码是：

//Pagination
  var p = document.getElementById('pagination');
  var phtml = '';

  for(var i = 0; i < slides.length; i++) {
    phtml+='<button>' + (i+1) + '</button>';
  }

  p.innerHTML = phtml; // create the pagination buttons

  var pbuttons = p.querySelectorAll('button'); // grab all the buttons

  for(var i = 0; i < pbuttons.length; i++) {
    pbuttons[i].onclick = (function(n) {
    pbuttons[i].classList.toggle('active');

      return function(){
        pauseSlideshow();
        goToSlide(n);
      };

    })(i);
  }

//分页
var p=document.getElementById（'pagination'）；
var phtml=''；
对于（变量i=0；i

试试这个：

//Pagination
  var p = document.getElementById('pagination');
  var phtml = '';

  for(var i = 0; i < slides.length; i++) {
    phtml+='<button>' + (i+1) + '</button>';
  }

  p.innerHTML = phtml; // create the pagination buttons

  var pbuttons = p.querySelectorAll('button'); // grab all the buttons
  var activeButton = null; // ref to active button

  for(var i = 0; i < pbuttons.length; i++) {
    pbuttons[i].onclick = (function(n) {

      return function(){
        if(activeButton)
            // delete class from old active button
            activeButton.classList.remove('active');

        // change ref, this is current button
        activeButton = this;
        // add class for new 
        activeButton.classList.add('active');
        pauseSlideshow();
        goToSlide(n);
      };
    })(i);
  }

//分页
var p=document.getElementById（'pagination'）；
var phtml=''；
对于（变量i=0；i

说明：
我们已经创建了一个变量，其中存储了对活动分页按钮的引用。单击时，我们从旧的活动按钮中删除了类

active

，并将ref更改为触发单击事件的按钮，然后我们将类

active

添加到更新的活动按钮中

尝试以下操作：

//Pagination
  var p = document.getElementById('pagination');
  var phtml = '';

  for(var i = 0; i < slides.length; i++) {
    phtml+='<button>' + (i+1) + '</button>';
  }

  p.innerHTML = phtml; // create the pagination buttons

  var pbuttons = p.querySelectorAll('button'); // grab all the buttons
  var activeButton = null; // ref to active button

  for(var i = 0; i < pbuttons.length; i++) {
    pbuttons[i].onclick = (function(n) {

      return function(){
        if(activeButton)
            // delete class from old active button
            activeButton.classList.remove('active');

        // change ref, this is current button
        activeButton = this;
        // add class for new 
        activeButton.classList.add('active');
        pauseSlideshow();
        goToSlide(n);
      };
    })(i);
  }

//分页
var p=document.getElementById（'pagination'）；
var phtml=''；
对于（变量i=0；i

说明：

---

我们已经创建了一个变量，其中存储了对活动分页按钮的引用。单击时，我们从旧的活动按钮中删除了class

active

，并将ref更改为触发单击事件的按钮，然后我们将class

active

添加到更新的活动按钮中

您可以这样切换一个类：

element.classList.toggle（'className'）（）谢谢，斯科特。但如果我修改代码以包含classList，它会将活动类添加到所有按钮中。如何将其添加到单击的按钮中并为其他人删除？（参见上面更新的代码）您可以像这样切换类：
element.classList.toggle（'className'）（）谢谢，斯科特。但如果我修改代码以包含classList，它会将活动类添加到所有按钮中。如何将其添加到单击的按钮中并为其他人删除？（请参阅上面更新的代码）尝试解释代码。否则，你可能会得到很多反对票，没关系。始终把它作为一种良好的练习。否则，您将获得许多反对票（根据经验）尝试解释代码。否则，你可能会得到很多反对票，没关系。始终把它作为一种良好的练习。否则，你会得到很多反对票（根据经验）