在jQuery中使用'this'

Question

任何人都可以幫我解決這個問題嗎？

這是我的HTML

<div class="wrapper"> 
    <div class="vacation" data-price="339.99"> 
    <h3>British vacation</h3> 
    <p>£339.99 per ticket</p> 
    <p>Tickets: 
    <input type="number" class="quantity" value='1'> 
    <p/> 
    </div> 
    <p>Total price £: <span class="total">399.99</span></p> 
</div> 
<div class="wrapper"> 
    <div class="vacation" data-price="449.99"> 
    <h3>Spanish vacation</h3> 
    <p>£449.99 per ticket</p> 
    <p>Tickets: 
    <input type="number" class="quantity" value='1'> 
    <p/> 
    </div> 
    <p>Total price £: <span class="total">449.99</span></p> 
</div> 
<div class="wrapper"> 
    <div class="vacation" data-price="559.99"> 
    <h3>Italian vacation</h3> 
    <p>£559.99 per ticket</p> 
    <p>Tickets: 
    <input type="number" class="quantity" value='1'> 
    <p/> 
    </div> 
    <p>Total price £: <span class="total">559.99</span></p> 
</div> 

和jQuery

$(document).ready(function(){ 
$('.vacation').on('keyup', '.quantity', function() { 

    var price = +$(this).closest('.vacation').data('price'); 
    var quantity = +$(this).closest('.quantity').val(); 
    var totalPrice = (price * quantity).toFixed(2); 
    $('.total').text(totalPrice); 

}); 
}); 

的問題是，當我計算價格的度假選擇一個我已經得到了所有的總價格更新。 我試過：

$(this).closest('.total').text(totalPrice); 

而且它不工作。

請檢查它JS Bin

非常感謝！

Answer 1

的問題來自於以下行：

$('.total').text(totalPrice); 

它會改變所有元素的文本與.total類。它應該是：

$(this).closest('.wrapper').find('.total').text(totalPrice); 
//OR 
$(this).parents('.wrapper').find('.total').text(totalPrice); 

所以選擇將上升到父.wrapper然後搜索與編輯.quantity相關.total元素。

希望這會有所幫助。

---

$(document).ready(function(){ 
 
    $('.vacation').on('keyup', '.quantity', function() { 
 

 
    var price = +$(this).closest('.vacation').data('price'); 
 
    var quantity = +$(this).closest('.quantity').val(); 
 
    var totalPrice = (price * quantity).toFixed(2); 
 
    
 
    $(this).closest('.wrapper').find('.total').text(totalPrice); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="vacation" data-price="339.99"> 
 
    <h3>British vacation</h3> 
 
    <p>£339.99 per ticket</p> 
 
    <p>Tickets: 
 
     <input type="number" class="quantity" value='1'> 
 
    <p/> 
 
    </div> 
 
    <p>Total price £: <span class="total">399.99</span></p> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="vacation" data-price="449.99"> 
 
    <h3>Spanish vacation</h3> 
 
    <p>£449.99 per ticket</p> 
 
    <p>Tickets: 
 
     <input type="number" class="quantity" value='1'> 
 
    <p/> 
 
    </div> 
 
    <p>Total price £: <span class="total">449.99</span></p> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="vacation" data-price="559.99"> 
 
    <h3>Italian vacation</h3> 
 
    <p>£559.99 per ticket</p> 
 
    <p>Tickets: 
 
     <input type="number" class="quantity" value='1'> 
 
    <p/> 
 
    </div> 
 
    <p>Total price £: <span class="total">559.99</span></p> 
 
</div>

Answer 2

的問題是，因爲你選擇所有.total元素，並設置對他們的text()。相反，你可以使用closest()擺脫其引發的事件和find()所有內需要的元素，像這樣.quantity最近的父.wrapper元素：

$('.vacation').on('keyup input', '.quantity', function() { 
    var $wrapper = $(this).closest('.wrapper'); 
    var price = parseFloat($wrapper.find('.vacation').data('price')); 
    var quantity = parseFloat($(this).val()); 
    $wrapper.find('.total').text((price * quantity).toFixed(2)); 
}); 

另外請注意，我掛在input事件覆蓋用戶他點擊number輸入上的向上/向下箭頭。

Answer 3

請試試這個：

相反

$('.total').text(totalPrice); 

轉到了

$(this).closest('.wrapper').find('.total').text(totalPrice); 

在這裏，我們在DOM結構，直到.wrapper往上走，然後尋找相關.total元素

。

Answer 4

試試這個：

$(document).ready(function(){ 
 
    $('.vacation').on('input', '.quantity', function() { 
 
     
 
    var price = +$(this).parent().parent().data('price'); 
 
    var quantity = +$(this).val(); 
 
    var totalPrice = (price * quantity).toFixed(2); 
 
    $(this).closest('.wrapper').find('.total').text(totalPrice); 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="wrapper"> 
 
\t <div class="vacation" data-price="339.99"> 
 
\t  <h3>British vacation</h3> 
 
\t  <p>£339.99 per ticket</p> 
 
\t  <p>Tickets: 
 
\t  <input type="number" class="quantity" value='1'> 
 
\t  <p/> 
 
\t </div> 
 
\t <p>Total price £: <span class="total">399.99</span></p> 
 
\t </div> 
 
\t <div class="wrapper"> 
 
\t <div class="vacation" data-price="449.99"> 
 
\t  <h3>Spanish vacation</h3> 
 
\t  <p>£449.99 per ticket</p> 
 
\t  <p>Tickets: 
 
\t  <input type="number" class="quantity" value='1'> 
 
\t  <p/> 
 
\t </div> 
 
\t <p>Total price £: <span class="total">449.99</span></p> 
 
\t </div> 
 
\t <div class="wrapper"> 
 
\t <div class="vacation" data-price="559.99"> 
 
\t  <h3>Italian vacation</h3> 
 
\t  <p>£559.99 per ticket</p> 
 
\t  <p>Tickets: 
 
\t  <input type="number" class="quantity" value='1'> 
 
\t  <p/> 
 
\t </div> 
 
\t <p>Total price £: <span class="total">559.99</span></p> 
 
\t </div> 
 
</body> 
 
</html>