主页 / 问题 / 1490661
Accepted
Dmitry Nefedov
Asked:2023-01-28 08:50:17 +0000 UTC2023-01-28 08:50:17 +0000 UTC

如何为JS点击添加类

  • 772

有这样一个代码：2 张具有相同类别的卡片。目前，只需单击一下，新类就会添加到两张卡片中，但有必要通过单击特定卡片，对其执行功能并添加类，而第二张卡片仍保持标准状态。

根据条件，您不能更改第二张卡上的类别并挂断第二个处理程序。 该代码仅在香草 js 中。 如何实施？ 这个选项可能吗？

function changeProp(event) {
  const card = event.target

  card.querySelector('.card-something').classList.toggle('some-class')
};

？

const card = document.querySelectorAll('.card');

const cardSlogan = document.querySelector('.card__slogan');
const cardText = document.querySelector('.card__text');
const cardImg = document.querySelector('.card__img');

function changeProp() {
  cardSlogan.forEach((el) => {
    el.classList.toggle('changeBorder');
  });

  cardText.forEach((el) => {
    el.classList.toggle('changeColor');
  });

  cardImg.forEach((el) => {
    el.classList.toggle('changeSize');
  });
}

card.addEventListener('click', changeProp);
  <section class="section-card">

  <div class="card">
    <div class="card__slogan"></div>
    <div class="card__text"></div>
    <div class="card__img"></div>
  </div>

  <div class="card">
    <div class="card__slogan"></div>
    <div class="card__text"></div>
    <div class="card__img"></div>
  </div>

  </section>

javascript

1 个回答

  1. Best Answer

    如果我们不能挂两个侦听器，那么我们需要将侦听器挂在document（最好是在这些元素所在的容器上）并在内部检查是否单击了具有类的元素card（我忘了它叫什么). 如果单击的是具有此类的元素，我们会在其中查找具有我们需要的类的元素，并对它们进行处理。

    function changeProp({target}) {
  if (target.classList.contains('card') === false) {
    return;
  }

  target.querySelector('.card__slogan')?.classList.toggle('changeBorder')
  target.querySelector('.card__text')?.classList.toggle('changeColor');
  target.querySelector('.card__img')?.classList.toggle('changeSize');
}

document.addEventListener('click', changeProp);
    <div class="card">
  <div class="card__slogan"></div>
  <div class="card__text"></div>
  <div class="card__img"></div>
</div>

<div class="card">
  <div class="card__slogan"></div>
  <div class="card__text"></div>
  <div class="card__img"></div>
</div>

    • 1

相关问题