如何在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>