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

Question

How can I target the correct .card element even if it has children that are clicked?

.card.animate <-- i want this

if currentTarget is used it will do something like this

wine_content.animate <-- not what I want

or

.card h4.animate <--- not what I want.

edit: I am really tempted do just do a for loop and addListener on each card from an array of elements. Is this so wrong?

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>

You already know about `currentTarget`, so why don't you just use it? `e.currentTarget.classList.toggle('animate');` or `this.classList.toggle('animate');` — Bergi, Aug 31 '16 at 05:00

score 1 · Accepted Answer · answered Aug 31 '16 at 06:21

Selecting the closest card in the click listener you can select the card on which you click- think you can take it forward from the below code.

Let me know your feedback. Cheers!

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>

Even if this doesn't work, I'm sure I can make it work with a little bit of edit. Very nice with the closest function. I'll check it out tomorrow. This is exactly why I use pure JS right now. Jquery is boring :) — Michael Bruce, Aug 31 '16 at 07:55
This was an excellent answer and I learned a ton. I rewrote it today and I am posting an edit, because I still have an issue. — Michael Bruce, Aug 31 '16 at 16:53
This is definately an answer to accept. Thank you. I got it to do somewhat what I want. I have a new question so I will be asking a new question. This is solved. Someone gave me a plus 1 and then took it away :/ wonder why... — Michael Bruce, Aug 31 '16 at 17:02

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

1 Answers1