クラスの1つの要素に影響を及ぼすJQueryイベントメソッド

Question

イベントメソッドを分離して、大きなクラス内の1つの特定の要素だけに影響するようには見えません。

目標：夜間の入力ボックスで値を変更すると、合計価格が変更されます（その特定の入力のみ）。現在、すべてのクラスが同時に変更されています。私は信じる.findか.closestはトリックですが、実装方法は不明です。ここには.jsがあります。

//nights auto multiply price 
$(".cashtotal").prepend("$"); 
$('.nights').on('keyup change', function() { 
var nights = +$(this).val(); 
var dailyPrice = +$(this).closest(".tour").data("daily-price"); 
$(".cashtotal").text(nights * dailyPrice); 
$(".nights-total").text(nights); 
$(".cashtotal").prepend("$"); 
}); 

と質問が答えを与える人は、それを解釈するために必要な方法で言葉で表現されたHTML

<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100"> 
        <h2 class="title">Idlehour, Angeles National Forest</h2> 
        <div class="info"> 
         <div class="description">A pleasant trail through red fir forest with access to different 
          lake basins and the Yosemite Creek watershed.</div> 

          <div class="nightsnum"> 
           <p> 
            <label for="nights">Number of Nights</label> 
           </p> 
           <p> 
            <input type="number" value="3" class="nights"> 
           </p> 
          </div> 
          <div class="total"> 
          <p><span class="cashtotal">400</span><br> for <span class="nights-count">3</span> Nights</p> 
          </div> 
         </div>  

Answer 1

//nights auto multiply price 
 

 
$(".cashtotal").prepend("$"); 
 

 
$('.nights').on('keyup change', function() { 
 
    
 
    var $thisTour = $(this).closest(".tour"); 
 
    var nights = $(this).val(); 
 
    var dailyPrice = $thisTour.data("daily-price"); 
 

 
    $(".cashtotal", $thisTour).text("$" + nights * dailyPrice); 
 
    $(".nights-total", $thisTour).text(nights); 
 

 
});

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

 
<!-- I can't seem to separate out an event method to effect just one specific element within a larger class. 
 

 
Goal: When user changes value in input box for number of nights, the total price changes (only for that specific input). Currently, all classes are being altered simultaneously. I believe .find or .closest is the trick, but am unsure how to implement. here's the .js. --> 
 

 
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100"> 
 
    <h2 class="title">Idlehour, Angeles National Forest</h2> 
 
    <div class="info"> 
 
    <div class="description">A pleasant trail through red fir forest with access to different lake basins and the Yosemite Creek watershed.</div> 
 

 
    <div class="nightsnum"> 
 
     <p> 
 
     <label for="nights">Number of Nights</label> 
 
     </p> 
 
     <p> 
 
     <input type="number" value="1" class="nights"> 
 
     </p> 
 
    </div> 
 
    <div class="total"> 
 
     <p><span class="cashtotal">100</span> 
 
     <br>for <span class="nights-total">1</span> Nights</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="200"> 
 
    <h2 class="title">Another forest</h2> 
 
    <div class="info"> 
 
    <div class="description">another tour.</div> 
 

 
    <div class="nightsnum"> 
 
     <p> 
 
     <label for="nights">Number of Nights</label> 
 
     </p> 
 
     <p> 
 
     <input type="number" value="1" class="nights"> 
 
     </p> 
 
    </div> 
 
    <div class="total"> 
 
     <p><span class="cashtotal">200</span> 
 
     <br>for <span class="nights-total">1</span> Nights</p> 
 
    </div> 
 
    </div> 
 
</div>

から例。これは私の解釈です。私は複数のツアーがあると仮定しています。 1つのツアーを変更すると、 ".nights-total"クラスと ".cashtotal"クラスがすべて変更されます。この問題を解決するためにできることは、セレクタのコンテキストを使用することです。この場合は、 ".nights-total"クラスと ".cashtotal"クラスのコンテキストであるコンテナであるツアーです。私が間違った前提を犯した場合は、あなたの質問をより明確な意味で更新してください。お役に立てれば。