我正在尝试创建一个数字字段(.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进行工作，但现在一个部分正在影响其他部分。
希望解释清楚，谢谢!
最佳答案
使用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);
});
});
也可以简化此过程，而不需要这些部分上的
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);
});
关于javascript - 。每个都无法分开，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41983337/