Как переключить класс элемента между target и currentTarget?

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 карты в храповой слушателя вы можете выбрать 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>