我构建了这个小示例。我有一些元素,其中一些有 15% 的折扣。我想在按下“购买”时将此值(价格的 15%)推送到数组中,并且仅当按下的商品有折扣时。
我的想法是使用 currentTarget 来识别哪些商品有折扣,哪些没有,但我的函数在控制台中总是返回相同的消息:“此商品没有折扣”,当然没有任何内容被推送到数组中。
我以错误的方式使用了 currentTarget?我也尝试使用 $(this) 而不是 e.currentTarget 但没有任何改变。
$(document).ready(function(e){
var $event = $(e.currentTarget).closest('.event');
var discountCustomer = [];
function addItem() {
if($event.find('.discount').length) {
var $discount = ((parseInt($event.find('.price').text()))*15)/100;
console.log($discount);
discountCustomer.push($discount);
$totalDiscount=0;
for (var i = 0; i < discountCustomer.length; i++) {
$totalDiscount += discountCustomer[i] << 0;
}
$('.totalDiscount').html(($totalDiscount) + ' €');
} else {
console.log('This seminar has NO discount');
}
console.log(discountCustomer);
}
$('.buy').click(function() {
addItem();
})
})
.event {
border: 1px solid black;
padding: 3px;
height: 20px;
width: 400px;
margin-bottom: 10px;
}
.event > * {
float: left;
margin-right: 15px;
}
.total > * {
float: left;
}
.totalDiscount {
margin-left: 10px;
}
.clear {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
<div class="item">Item 1</div>
<div class="discount">This seminar has a discount!</div>
<div class="price">10 €</div>
<button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
<div class="item">Item 2</div>
<div class="price">10 €</div>
<button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
<div class="item">Item 3</div>
<div class="discount">This seminar has a discount!</div>
<div class="price">10 €</div>
<button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
<p>Total Discount: </p>
<p class="totalDiscount"></p>
</div>
最佳答案
您还应该将 e
传递给 addItem
函数 var $event = $(e.currentTarget).closest('.event');
应该在 addItem
函数中
$(document).ready(function(){
var discountCustomer = [];
function addItem(e) {
var $event = $(e.currentTarget).closest('.event');
if($event.find('.discount').length) {
var $discount = ((parseInt($event.find('.price').text()))*15)/100;
console.log($discount);
discountCustomer.push($discount);
$totalDiscount=0;
for (var i = 0; i < discountCustomer.length; i++) {
$totalDiscount += discountCustomer[i] << 0;
}
$('.totalDiscount').html(($totalDiscount) + ' €');
} else {
console.log('This seminar has NO discount');
}
console.log(discountCustomer);
}
$('.buy').click(function(e) {
addItem(e);
})
})
.event {
border: 1px solid black;
padding: 3px;
height: 20px;
width: 400px;
margin-bottom: 10px;
}
.event > * {
float: left;
margin-right: 15px;
}
.total > * {
float: left;
}
.totalDiscount {
margin-left: 10px;
}
.clear {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
<div class="item">Item 1</div>
<div class="discount">This seminar has a discount!</div>
<div class="price">10 €</div>
<button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
<div class="item">Item 2</div>
<div class="price">10 €</div>
<button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="event">
<div class="item">Item 3</div>
<div class="discount">This seminar has a discount!</div>
<div class="price">10 €</div>
<button class="buy">Buy</button>
</div>
<div class="clear"></div>
<div class="total">
<p>Total Discount: </p>
<p class="totalDiscount"></p>
</div>
关于javascript - 正确使用 currentTarget 的点击事件 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47773294/