我如何定位正确的.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>
&#13;
答案 0 :(得分: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>