单击时添加活动类以进行分页

Question

Within my slideshow, I would like to add and remove an active class to each pagination button on click. How can I do this with native JS. My code so far:

//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);
  }

Answer 1

Try this:

//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);
  }

Explanation:
We have created variable wich stored ref to active pagination button. On click we removed class active from old active button and change ref to button wich fired click event, then we add class active to updated active button