How to add/remove class to specific anchor elements inside div?

问题

I have a DOM as shown below in which to add/remove class only after third anchor element (only 4th and 5th element).

<div class="featured-block">
   <a href="" class="featured-block__item cf">   <!-- 1st element -->
   </a>
   <a href="" class="featured-block__item cf">   <!-- 2nd element -->
   </a>
   <a href="" class="featured-block__item cf">   <!-- 3rd element -->
   </a>
   <a href="" class="featured-block__item cf">  <!-- Add/remove (4th element)-->
   </a>
   <a href="" class="featured-block__item cf">  <!-- Add/remove (5th element)--> 
   </a>
</div>

I have used the following JS code in order to add/remove class featured-block__item-active in the DOM above at the 4th and 5th position.

The problem which I am having right now is that it adds/removes the class at 4th and 5th position and then adds/removes class again at 1st/2nd/3rd position (which I don't want).

document.querySelectorAll('.featured-block .featured-block__item')[3].classList.add('featured-block__item-active');  // Line Z (Adding at 4th element) 
    const pics = document.querySelectorAll('.featured-block .featured-block__item');

    function toggleClass() {
        const activePic = document.querySelector('.featured-block__item.featured-block__item-active');
        const activeIndex = Array.prototype.indexOf.call(pics, activePic);
        const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
        const nextPic = pics[nextIndex];

        setTimeout(() => activePic.classList.remove('featured-block__item-active'), transitionDelay);         // Line A
        setTimeout(() => nextPic.classList.add('featured-block__item-active'), totalDelay);                   // Line B
    }

    setInterval(toggleClass, intervalDelay);

Problem Statement:

I am wondering what changes I should make in the JS above so that it add/remove featured-block__item-active class only at 4th and 5th position.

I think, I need to make changes at Line Z, Line A and Line B.

回答1:

Just change 0 to 3.

document.querySelectorAll('.featured-block .featured-block__item')[3].classList.add('featured-block__item-active'); // Line Z (Adding at 4th element) 
const pics = document.querySelectorAll('.featured-block .featured-block__item');
const lastPic = pics.length - 1;
const transitionDuration = 500; // matches CSS
let transitionDelay = 3 * 1000;
const totalDelay = transitionDuration + transitionDelay;
const intervalDelay = (transitionDuration * 2) + transitionDelay;

function toggleClass() {
  const activePic = document.querySelector('.featured-block__item.featured-block__item-active');
  const activeIndex = Array.prototype.indexOf.call(pics, activePic);
  const nextIndex = activeIndex === lastPic ? 3 : activeIndex + 1;
  const nextPic = pics[nextIndex];

  setTimeout(() => activePic.classList.remove('featured-block__item-active'), transitionDelay); 
  setTimeout(() => nextPic.classList.add('featured-block__item-active'), totalDelay);
}

setInterval(toggleClass, intervalDelay);

.featured-block__item { border: solid lime 1px;}
.featured-block__item-active{background-color: #DDDDFF;}

<div class="featured-block">
  <a href="" class="featured-block__item cf">1  </a>
  <a href="" class="featured-block__item cf">2  </a>
  <a href="" class="featured-block__item cf">3  </a>
  <a href="" class="featured-block__item cf">4  </a>
  <a href="" class="featured-block__item cf">5  </a>
</div>

来源：https://stackoverflow.com/questions/57593166/how-to-add-remove-class-to-specific-anchor-elements-inside-div

标签

javascript

dom