この小さなサンプルを作成します。私にはいくつかの要素があり、その中には15%の割引があります。私は、この値(価格の15%)を「買い」が押されたとき、そして押された項目が割引を持っているときだけ、配列に入れたいと思っています。clickイベントのcurrentTargetを正しく使用するjQuery
アイデアは、アイテムに割引があり、そうではないことを認識するためにcurrentTargetを使用することでしたが、私の関数はコンソールに常に「このアイテムは割引はありません」と返し、もちろん何も配列にプッシュしません。
currentTargetを間違った方法で使用していますか? e.currentTargetの代わりに$(this)も使用しようとしましたが、何も変更されませんでした。
$(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();
\t })
})
.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>
は 'イベント変数を取るready'ん
addItem
関数内に来る必要がありますか?私はその実行に欠陥があると思う。イベント変数は、クリック、マウスオーバーなどに入力されますが、私は 'ready'がこれをしないと思います。 –また、単なる考えですが、情報(割引など)についてDOMに照会している場合は、維持管理したり操作するのが難しい製品を作成します。価格情報は、おそらく配列に格納され、APIから取得されるべきです。これにより、探している情報を簡単に照会することができます。 –
はい、私が現在取り組んでいるプロジェクトにはこの種のアプローチがあり、変更できません。だから私はそれをこのようにしなければならないのです。 –