2017-12-12 12 views
2

この小さなサンプルを作成します。私にはいくつかの要素があり、その中には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>

+0

は 'イベント変数を取るready'んaddItem関数内に来る必要がありますか?私はその実行に欠陥があると思う。イベント変数は、クリック、マウスオーバーなどに入力されますが、私は 'ready'がこれをしないと思います。 –

+0

また、単なる考えですが、情報(割引など)についてDOMに照会している場合は、維持管理したり操作するのが難しい製品を作成します。価格情報は、おそらく配列に格納され、APIから取得されるべきです。これにより、探している情報を簡単に照会することができます。 –

+0

はい、私が現在取り組んでいるプロジェクトにはこの種のアプローチがあり、変更できません。だから私はそれをこのようにしなければならないのです。 –

答えて

3

あなたはaddItem関数にeを渡す必要もvar $event = $(e.currentTarget).closest('.event');

$(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); 
 
\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>

+1

Perfekt、それはまさに私が欲しいものです。ありがとうございました! –

1

あなたは、クリックイベントをキャプチャしていない、私はそれをキャプチャするこの小さな修正をしました(そして現在の要素を渡す)のaddItem機能に...それがお役に立てば幸い!

$(document).ready(function(e){ 
 
    
 
    var discountCustomer = []; 
 

 
    function addItem($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) { 
 
    var $event = $(e.target).closest('.event'); 
 
    addItem($event); 
 
\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>

関連する問題