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()。相反，您可以使用closest()从引发事件的.wrapper获取最近的父.quantity元素，并使用find()所有必需元素，如下所示：

$('.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 2

请试试这个：

而不是

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

转到

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

我们在DOM结构中上升到.wrapper，然后查找关联的.total元素。

Answer 3

问题来自以下几行：

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

它将使用类.total更改所有元素的文本。它应该是：

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

因此，选择器将转到父.wrapper，然后搜索与已编辑的.total相关的.quantity元素。

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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">
	  <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>
</body>
</html>

使用＆＃39;这个＆＃39;在jQuery中

4 个答案: