.each не работает для разделения разделов

Я пытаюсь создать поле чисел (.item_adults), которое умножает его на себя и печатает значение в class = "item_price". Для этого я создаю некоторые из этого:.each не работает для разделения разделов

<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

.each не работает для разделения разделов

ответ

Смежные вопросы