javascript - 如果发生两个更改之一则运行 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) 并且您可以通过执行 $('#productTwo, #productTwoQ').change() 将两个选择器放在那里>。检查下面的代码片段。

$('#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);

});