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

おかげでたくさんのそれをチェックしてください！それはクラス.totalを持つすべての要素のテキストを変更します

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

：

Answer 1

問題は、次の行から来ます。それは次のようになります。

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

だから、セレクタは、編集された.quantityに関連.total要素を探し、親.wrapperまで行きます。

これが役に立ちます。

---

$(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()を設定しているため問題があります。代わりに、あなたはこのようなイベントとその内find()必要なすべての要素を、上げ.quantityから最も近い親要素.wrapper取得するclosest()を使用することができます。また

$('.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入力の上矢印または下矢印をクリックします。ここでは、.wrapperまでDOM構造に上がった後、関連する.total要素を探している

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

ため

代わりの

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

ゴー：

Answer 3

これを試してみてください。

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>