click 이벤트에 대한 currentTarget의 올바른 사용 jQuery

이 작은 예제를 빌드합니다. 나는 몇 가지 요소를 가지고 있으며이 중 일부는 15 %의 할인이 있습니다. 나는이 값 (가격의 15 %)을 "구매"가 눌러 졌을 때 그리고 눌려진 항목에 할인이있는 경우에만 Array에 넣기를 원합니다.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>

출처

2017-12-12 Danny_DD

가'이벤트 변수를 가지고 ready' 않습니다 addItem 함수 내 와야한다? 나는 그 실행에 결함이 있다고 생각한다. 이벤트 변수는 click, mouseover 등에서 채워지지만'ready '가 이것을 수행하지 않는다고 생각합니다. –

또한 생각해 보았지만 DOM에 정보 (예 : 할인)를 쿼리하는 경우 관리하기가 쉽지 않은 제품을 만들 것입니다. 가격 정보는 아마 배열에 저장되고 API에서 검색되어야합니다. 이렇게하면 찾고있는 정보를 쉽게 쿼리 할 수 있습니다. –

네,하지만 지금 일하고있는 프로젝트는 이런 종류의 접근법을 가지고 있으며 변경할 수 없습니다. 그것이 내가 이런 방식으로 작동하게 만드는 이유입니다. –

당신은 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>

출처

2017-12-12 13:14:41 Raavan

Perfekt, 정확히 내가 원하는 것을 수행합니다. 고맙습니다! –

, 나는 그 기능을 항목 추가하기 위해 (그리고 현재 요소를 통과) 캡처이 작은 수정을했다 ... 희망이 도움이!

$(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>

출처

2017-12-12 13:11:32 Albeis

click 이벤트에 대한 currentTarget의 올바른 사용 jQuery

답변

관련 문제