Question

我有2个输入（一个数字输入和一个选择），它们的值可以更改，我想显示两个值的总和，即使它们在div上更改也是如此。

$(document).ready(function() {
  var display = $('#js-cost');
  var base_price = 14;
  var price = 0;

  $('#js-price').on('change', function() {
    base_price = $('#js-price').val();
    display.html(base_price);
  });

  $('#js-duration').on('change', function() {
    if ($(this).val() == 30) price = 10;
    if ($(this).val() == 45) price = 15;
    if ($(this).val() == 60) price = 30;

    display.html(base_price + price);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="js-duration">
    <option value="15">15 sec</option>
    <option value="30">30 sec (+ $10)</option>
    <option value="45">45 sec (+ $15)</option>
    <option value="60">60 sec (+ $30)</option>
  </select>

  <input id="js-price" type="number" value="14" min="14">
</form>

<p>Current cost: ($<span id="js-cost">14</span> per view)</p>

我如何进行这项工作？

Answer 1

您非常亲密。对于选择列表，您的change事件是可以的，但是对于实时更改的输入（无论是使用键盘还是单击箭头键），请使用.bind('input', callback)方法。

$(document).ready(function() {
    var display = $('#js-cost');
    var base_price = 14;
    var price = 0;

    $('#js-price').bind('input', function() { 
        base_price = $('#js-price').val();
        display.html(base_price);
    });

    $('#js-duration').on('change', function() {
        if ($(this).val() == 30) price = 10;
        if ($(this).val() == 45) price = 15;
        if ($(this).val() == 60) price = 30;

        display.html(parseInt(base_price) + parseInt(price));
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="js-duration">
        <option value="15">15 sec</option>
        <option value="30">30 sec (+ $10)</option>
        <option value="45">45 sec (+ $15)</option>
        <option value="60">60 sec (+ $30)</option>
    </select>

    <input id="js-price" type="number" value="14" min="14">
</form>

<p>Current cost: ($<span id="js-cost">14</span> per view)</p>

Answer 2

如果我正确地解释了问题，那么您几乎可以完成所有工作，则只需要将最终值加在一起即可。最初这是行不通的，因为.val是作为字符串而不是数字返回的，因此将其传递到parseInt会将其转换为数字，从而使其可以正常工作。

请注意，parseInt()通常只适用于整数，您可以使用parseFloat()来处理小数

$(document).ready(function() {
    var display = $('#js-cost');
    var base_price = 14;
    var price = 0;

    $('#js-price').on('change', function() {
        base_price = parseInt($('#js-price').val());
        
        display.html(base_price);
    });

    $('#js-duration').on('change', function() {
        if ($(this).val() == 30) price = 10;
        if ($(this).val() == 45) price = 15;
        if ($(this).val() == 60) price = 30;

        display.html(base_price+price);
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="js-duration">
        <option value="15">15 sec</option>
        <option value="30">30 sec (+ $10)</option>
        <option value="45">45 sec (+ $15)</option>
        <option value="60">60 sec (+ $30)</option>
    </select>

    <input id="js-price" type="number" value="14" min="14">
</form>

<p>Current cost: ($<span id="js-cost">14</span> per view)</p>

Answer 3

希望获得帮助

$(document).ready(function() {
    var display = $('#js-cost');
    $('#js-price').on('change', function() {
        display.html(getTotalPrice());
    });

    $('#js-duration').on('change', function() {
        display.html(getTotalPrice());
    });
    function getTotalPrice(){
      var base_price = parseInt($('#js-price').val());
        var duration = parseInt($('#js-duration').val());
        var price = 0;
        15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
      return base_price+price;
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="js-duration">
        <option value="15">15 sec</option>
        <option value="30">30 sec (+ $10)</option>
        <option value="45">45 sec (+ $15)</option>
        <option value="60">60 sec (+ $30)</option>
    </select>

    <input id="js-price" type="number" value="14" min="14">
</form>

<p>Current cost: ($<span id="js-cost">14</span> per view)</p>

如何使用2个表单输入的总和更新div并在更改时更新

3 个答案: