2つの変更のうち1つが実行された場合に実行します。JS

Question

[選択]ボックスが変更されたときに実行されるこの機能があります。

$('#productTwo').change(function(e) { 

    var element = $(this).find('option:selected'); 
    var price = element.attr("data-price"); 
    $('#productTwoP').val(price); 

    var quantity = $('#productTwoQ').val(); 

    $('#productTwoT').html(price*quantity); 

}); 

しかし、ユーザーが入力フィールドで数量（#productTwoQ）を変更する場合、私はまた、実行に機能をしたいです。

<div class="row"> 
    <div class="col-sm-3"> 
     <p>Testers<br> 
     <select id="productOne" name="productOne"> 
      <option data-price="1249.99" value="1">PRO Battery Tester</option> 
      <option data-price="444.99" value="2">MDX335P</option> 
      <option data-price="494.99" value="3">MDX645</option> 
      <option data-price="694.99" value="4">MDX645P</option> 
      <option data-price="694.99" value="5">MDX655</option> 
      <option data-price="899.99" value="6">MDX655P</option> 
      <option data-price="949.99" value="7">MDX655P Start Stop</option> 
     </select></p> 
     <p>Chargers<br> 
     <select id="productTwo" name="productTwo"> 
      <option data-price="1249.99" value="1">PRO 60</option> 
      <option data-price="1249.99" value="2">MXTS 70/50 EU-K</option> 
      <option data-price="333.33" value="3">MXS 25EC UK</option> 
      <option data-price="199.99" value="4">MXS 10EC UK</option> 
      <option data-price="633.33" value="5">MXTS 40 UK</option> 
      <option data-price="266.66" value="6">MXS 25 UK</option> 
      <option data-price="266.66" value="7">MXT 14 UK</option> 
      <option data-price="175.83" value="8">MXT 4.0 UK</option> 
     </select></p> 
    </div> 
    <div class="col-sm-3"> 
     <p>Quantity<br><input id="productOneQ" type="number" name="productOneQ" min="0" step="any" value="<?php if(!is_null($productOneQ)) { echo $productOneQ; } ?>"></p> 
     <p>Quantity<br><input id="productTwoQ" type="number" name="productTwoQ" min="0" step="any" value="<?php if(!is_null($productTwoQ)) { echo $productTwoQ; } ?>"></p> 
    </div> 
    <div class="col-sm-3"> 
     <p>Unit Price<br><input id="productOneP" type="number" name="productOneP" min="0" step="any" value="<?php if(!is_null($productOneP)) { echo $productOneP; } ?>"></p> 
     <p>Unit Price<br><input id="productTwoP" type="number" name="productTwoP" min="0" step="any" value="<?php if(!is_null($productTwoP)) { echo $productTwoP; } ?>"></p> 
    </div> 
    <div class="col-sm-3"> 
     <p><span id="productOneT" class="total right">TOTAL: £<?php echo number_format($productOneTotal = $productOneP*$productOneQ, 2, '.', ','); ?></span></p> 
     <p><span id="productTwoT" class="total right">TOTAL: £<?php echo number_format($productTwoTotal = $productTwoP*$productTwoQ, 2, '.', ','); ?></span></p> 
    </div> 
</div> 

<hr /> 
<div class="row"> 
    <div class="col-sm-6"> 
    </div> 
    <div class="col-sm-6"> 
     <p><span class="total right">GRAND TOTAL: £<?php echo number_format($productOneTotal + $productTwoTotal, 2, '.', ','); ?></span></p> 
    </div> 
</div> 

Answer 1

は、あなたはそれがない$(this)によってdependend作る必要がありますし、$('#productTwo, #productTwoQ').change()を行うことによって、そこに2つのセレクタを置くことができます。下のスニペットを確認してください。

$('#productTwo, #productTwoQ').change(function(e) { 

     var element = $('#productTwo').find('option:selected'); 
     var price = element.attr("data-price"); 
     $('#productTwoP').val(price); 

     var quantity = $('#productTwoQ').val(); 

     $('#productTwoT').html(price*quantity); 

});