targetとcurrentTargetの間で要素のクラスを切り替えるにはどうすればよいですか？

Question

クリックされた子があっても正しい.card要素をどのようにターゲットできますか？

.card.animate < - ではない私は

または

.card h4.animate <欲しいもの - は、currentTargetは、それがこの

wine_content.animate <ような何かをします使用されている場合、私はこの

をしたいです - - 私が望むものではない。

編集： 私は本当に誘惑されていますが、各カードのforループとaddListenerを要素の配列から行います。これは間違っていますか？あなたは、あなたが以下のコードから前方にそれを取ることができると思いクリック - どのcardを選択することができますクリックリスナーでclosestカードを選択

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

。

あなたのフィードバックを教えてください。乾杯！

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>