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

Question

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

.card.animate＆lt; - 我想要这个

如果使用currentTarget，它将执行类似这样的操作

wine_content.animate＆lt; - 不是我想要的

或

.card h4.animate＆lt; ---不是我想要的。

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

＆＃13;

＆＃13;

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

＆＃13;

/********************/
/*    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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在点击监听器中选择closest卡片，您可以选择点击的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: http://stackoverflow.com/questions/22100853/dom-pure-javascript-solution-to-jquery-closest-implementation
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>