Как сделать, чтобы при клике на MORE/BACK переключалась только одна конкретная карточка, а не все сразу на чистом JS?

Question

Есть такая, упрощенная для примера, разметка карточек товара:

<section class="cards_wrapper">
    <div class="card">
        <div class="face">
            <img class="picture" src="img/meter.png" alt="">
            <p class="more link">MORE</p>
        </div>
        <div class="description">
            <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
            <p class="back link">BACK</p>
        </div>
    </div>
    <div class="card">
        <div class="face">
            <img class="picture" src="img/size.png" alt="">
            <p class="more link">MORE</p>
        </div>
        <div class="description">
            <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
            <p class="back link">BACK</p>
        </div>
    </div>
    <div class="card">
        <div class="face">
            <img class="picture" src="img/weighing-scale.png" alt="">
            <p class="more link">MORE</p>
        </div>
        <div class="description">
            <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
            <p class="back link">BACK</p>
        </div>
    </div>
</section>

Пробный JS:

const cardsLink = document.querySelectorAll(".link");
const cardsFace = document.querySelectorAll(".face");

cardsLink.forEach(cLink => {
    cLink.addEventListener("click", function() {
        cardsFace.forEach(cFace => {
            cFace.classList.toggle("on");
        });
    });
});

css:

.on {
    transform: translateX(-100%);
}

Как сделать, чтобы при клике на MORE/BACK переключалась только одна конкретная карточка, а не все сразу? Должно быть много карточек. Нужно реализовать на чистом JS без jQuery. В JS знания пока очень поверхностные.

Answer 1

Данная цикл производит изменения для всех элементов, её нужно убрать.

cardsFace.forEach(cFace => {
    cFace.classList.toggle("on");
});

Вместо неё можно использовать this обращаясь к активному элементу, тем самым мы получим или <p class="more link">MORE</p>, или же <p class="back link">BACK</p>. А дальше уже используя parentElement и querySelector находим нужен элемент и задаём свойства.
Тем самым получим:

this.parentElement.parentElement.querySelector('.face').classList.toggle("on");

А вот конечный, полный код:

const cardsLink = document.querySelectorAll(".link");

cardsLink.forEach(cLink => {
  cLink.addEventListener("click", function() {          
    this.parentElement.parentElement.querySelector('.face').classList.toggle("on");
  });
});

БЛОГ НА HUSL

Как сделать, чтобы при клике на MORE/BACK переключалась только одна конкретная карточка, а не все сразу на чистом JS?

Ответы (1 шт):