如何在div中的特定锚元素上添加/删除类? [英] How to add/remove class to specific anchor elements inside div?

问题描述

我有一个如下所示的DOM，仅在第三个锚元素(仅 4th 和 5th 元素)之后可以添加/删除类

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>

我已使用以下 JS代码，以便在第4 个以上DOM中添加/删除类features-block__item-active 和第五名.

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.

我现在遇到的问题是它在第4位和第5位位置上添加/删除班级，然后在上再次添加/删除班级>第一/第二/第三位置(我不想要).

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

问题陈述:

我想知道我应该对上述 JS 进行哪些更改，以使其仅在第4 个添加/删除feature-block__item-active类>和第5 位.

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.

我认为，我需要在 Z线， A线和 B线进行更改.

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

推荐答案

只需将0更改为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>

这篇关于如何在div中的特定锚元素上添加/删除类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！