如何在 target 和 currentTarget 之间切换元素的 class？

Question

如何定位正确的 .card 元素，即使它有被点击的子元素？

.card.animate <-- 我想要这个

如果使用 currentTarget，它会做这样的事情

wine_content.animate <-- 不是我想要的

或

.card h4.animate <--- 不是我想要的。

编辑：我真的很想在元素数组中的每张卡片上做一个 for 循环和 addListener。这有错吗？

var card = document.getElementById('wine_content');
    
    card.addEventListener("click", function (e) {
        if (e.target !== e.currentTarget) {  
          e.target.classList.toggle('animate');
        }
        e.stopPropagation()
    }, false);

/********************/
/*    WINE CARDS    */
/********************/

#wine_content {
    background-color: #e5e5e5;
}
.cards {
    display: flex;
    flex-wrap: wrap;
}

/* NOT WHAT I WANT */
.card h4.animate {
  color: #F00;
}
/* EXACTLY WHAT I WANT no matter the node in the child family line.*/
.card.animate h4 {
  color: #0F0;
}
.card {
    flex-grow: 1;
    flex-basis: 30em;
    height: 150px;
    margin: 0 10px;
}
.card-face {
  background-color: #fff;
}

<div class="content">
    <section id="wine_content">
      <div class="cards">
        <div class="card">
          <div class="card-face">
              <h4>The Prisoner</h4>
              <p>Merlot</p>
              <p>Diamond Peaks</p>
            <p>2012</p>
          </div>  
        </div>
        <div class="card">
          <div class="card-face">
              <h4>The Prisoner</h4>
              <p>Merlot</p>
              <p>Diamond Peaks</p>
            <p>2012</p>
          </div>  
        </div>
        <div class="card">
          <div class="card-face">
              <h4>The Prisoner</h4>
              <p>Merlot</p>
              <p>Diamond Peaks</p>
            <p>2012</p>
          </div>  
        </div>
        <div class="card">
          <div class="card-face">
              <h4>The Prisoner</h4>
              <p>Merlot</p>
              <p>Diamond Peaks</p>
            <p>2012</p>
          </div>  
        </div>
        <div class="card">
          <div class="card-face">
              <h4>The Prisoner</h4>
              <p>Merlot</p>
              <p>Diamond Peaks</p>
            <p>2012</p>
          </div>  
        </div>
        <div class="card">
          <div class="card-face">
              <h4>The Prisoner</h4>
              <p>Merlot</p>
              <p>Diamond Peaks</p>
            <p>2012</p>
          </div>  
        </div>
        <div class="card">
          <div class="card-face">
              <h4>The Prisoner</h4>
              <p>Merlot</p>
              <p>Diamond Peaks</p>
            <p>2012</p>
          </div>  
        </div>
        
      </div>
    </section>
</div>

Answer 1

在点击侦听器中选择 closest 卡片，您可以 select 您点击的 card - 认为您可以从下面的代码中向前推进。

让我知道您的反馈。干杯！

var card = document.getElementById('wine_content');

card.addEventListener("click", function(e) {
  e.stopPropagation();
  var cardElement = closest(e.target, function(el) {
    return el.classList.contains('card');
  });
  if (cardElement)
    cardElement.classList.toggle('animate');
}, false);

// getting the closest in the parent hierarchy
// reference: 
function closest(el, fn) {
  while (el) {
    if (fn(el)) return el;
    el = el.parentNode;
  }
}

/********************/

/*    WINE CARDS    */

/********************/

#wine_content {
  background-color: #e5e5e5;
}
.cards {
  display: flex;
  flex-wrap: wrap;
}
/* NOT WHAT I WANT */

.card h4.animate {
  color: #F00;
}
/* EXACTLY WHAT I WANT no matter the node in the child family line.*/

.card.animate h4 {
  color: #0F0;
}
.card {
  flex-grow: 1;
  flex-basis: 30em;
  height: 150px;
  margin: 0 10px;
}
.card-face {
  background-color: #fff;
}

<div class="content">
  <section id="wine_content">
    <div class="cards">
      <div class="card">
        <div class="card-face">
          <h4>The Prisoner</h4>
          <p>Merlot</p>
          <p>Diamond Peaks</p>
          <p>2012</p>
        </div>
      </div>
      <div class="card">
        <div class="card-face">
          <h4>The Prisoner</h4>
          <p>Merlot</p>
          <p>Diamond Peaks</p>
          <p>2012</p>
        </div>
      </div>
      <div class="card">
        <div class="card-face">
          <h4>The Prisoner</h4>
          <p>Merlot</p>
          <p>Diamond Peaks</p>
          <p>2012</p>
        </div>
      </div>
      <div class="card">
        <div class="card-face">
          <h4>The Prisoner</h4>
          <p>Merlot</p>
          <p>Diamond Peaks</p>
          <p>2012</p>
        </div>
      </div>
      <div class="card">
        <div class="card-face">
          <h4>The Prisoner</h4>
          <p>Merlot</p>
          <p>Diamond Peaks</p>
          <p>2012</p>
        </div>
      </div>
      <div class="card">
        <div class="card-face">
          <h4>The Prisoner</h4>
          <p>Merlot</p>
          <p>Diamond Peaks</p>
          <p>2012</p>
        </div>
      </div>
      <div class="card">
        <div class="card-face">
          <h4>The Prisoner</h4>
          <p>Merlot</p>
          <p>Diamond Peaks</p>
          <p>2012</p>
        </div>
      </div>

    </div>
  </section>
</div>

如何在 target 和 currentTarget 之间切换元素的 class？

How to toggle a class of a element between target and currentTarget?

javascript

css

addeventlistener

target

flexbox