。每个不能分开部分

我试图创建一个数字字段（.item_adults），将它自乘并将值打印到class =“item_price”中。要做到这一点，我创建了一些这样的：。每个不能分开部分

<div class="bookSection"> 
    <input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0"> 
    <p>Subtotal: $<span class="item_price">10</span></p> 
</div>

$(document).ready(function() { 
 
    $(".bookSection").each(function() { 
 
     $(".item_adults").change(function(){ 
 
      var price = ($(this).val()); 
 
      var ammount = ($(this).attr("data-price")); 
 
      var total = (price) * ammount; 
 
      $(".item_price").html(total); 
 
     }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 

 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
<div class="bookSection"> 
 
    <input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0"> 
 
    <p>Subtotal: $<span class="item_price">10</span></p> 
 
</div> 
 
    
 
<div class="bookSection"> 
 
    <input class="item_adults" name="adults" type="number" data-price="15" value="1" maxlength="2" min="0"> 
 
    <p>Subtotal: $<span class="item_price">15</span></p> 
 
</div> 
 

 
</body> 
 
</html>

，我使用：

$(".bookSection").each(function() {

尝试它部分分开独立工作修改其拥有.item_price，但现在有一部分正在影响其他部分。

希望解释清楚，谢谢！

来源

2017-02-01 ysanmiguel

最好在此处将代码示例包含在Stack Overflow中，而不是链接到外部资源。 –

查找每个部分内的情况下，使用find()

$(".bookSection").each(function() { 
    var $item_price = $(this).find(".item_price") 
    $(this).find(".item_adults").change(function(){ 
     var price = ($(this).val()); 
     var ammount = ($(this).attr("data-price")); 
     var total = (price) * ammount; 
     $item_price.html(total); 
    }); 
});

也可以simplfy此无需对each部分：

$(".item_adults").change(function(){ 
     var price = ($(this).val()); 
     var ammount = ($(this).attr("data-price")); 
     var total = (price) * ammount; 
     $(this).closest(".bookSection").find(".item_price").html(total); 
});

来源

2017-02-01 15:27:11 charlietfl

使用简化版本，非常感谢！ – ysanmiguel

如果您多次使用'$（this）'，可能最好将其设置为var – Pete

@Pete agrree是最佳实践 – charlietfl

关闭，只有一些小的变化。当你引用$（“。item_adults”）和$（“。item_price”）时，它会影响它们。将范围限制到当前.bookSection，如下：

$(document).ready(function() { 
 
    $(".bookSection").each(function() { 
 
     $(this).find(".item_adults").change(function(){ 
 
      var price = ($(this).val()); 
 
      var ammount = ($(this).attr("data-price")); 
 
      var total = (price) * ammount; 
 
      $(this).parents(".bookSection").find(".item_price").html(total); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 

 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
<div class="bookSection"> 
 
    <input class="item_adults" name="adults" type="number" data-price="10" value="1" maxlength="2" min="0"> 
 
    <p>Subtotal: $<span class="item_price">10</span></p> 
 
</div> 
 
    
 
<div class="bookSection"> 
 
    <input class="item_adults" name="adults" type="number" data-price="15" value="1" maxlength="2" min="0"> 
 
    <p>Subtotal: $<span class="item_price">15</span></p> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-02-01 15:24:54 Snowmonkey

。每个不能分开部分

回答

相关问题