更改时重新计算选择选项的总和

Question

我有这个选择器，根据选项总和 ID 属性和输入编号计算选择更改，问题是当我选择选项 1 并增加输入编号时工作得很好，但是当我选择选项 2 或 3 并增加输入编号时总和的计算再次混乱。当我选择不同的选项时，如果进行了更改，我会尝试将总价再次更改为选项 ID 中的价格。// Input number $('input[name=\'cantitate\']').on('change', function() {      var cant  = $('#cantitate').val();      var price = $(this).children(":selected").attr("id");    $('#total').text(price * cant + ' USD');  });// Select box $('#variantacurs').on('change', function() {       var cant  = $('#cantitate').val();       var price = $(this).children(":selected").attr("id");     $('#total').text(price * cant + ' USD');  });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="total">60</div>  <select class="form-control" id="variantacurs" name="variantacurs">    <option value="">---SELECT---</option>     <option id="100" value="Option 1">Option 1</option>     <option id="210" value="Option 2">Option 2</option>     <option id="300" value="Option 3">Option 3</option>  </select> <input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1" >

Answer 1

这段代码有很多问题：

1. 标签id不是存储值的好方法。值可以存储在value属性本身中，而标签是<option>元素的实际内容。这也使得检索值变得更加容易。

2. 您可以只定义一个函数（例如calc()在我的示例中），并分配它对onchange输入的引用，而不是重复代码。

3. 使用 将Number()输入的字符串转换val()为正确的数字。

例子：

// Input number

$('input[name=\'cantitate\']').on('change', calc);

$('#variantacurs').on('change', calc);

function calc() {

      var cant = Number($('#cantitate').val());

      var price = Number($('#variantacurs').val());

      $('#total').text(cant * price + ' USD');

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="total">60</div>

<select class="form-control" id="variantacurs" name="variantacurs">

  <option value="60" disabled selected>---SELECT---</option>

  <option value="100">Option 1</option>

  <option value="210">Option 2"</option>

  <option value="300">Option 3"</option>

</select>

<input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1">

Answer 2

拼写错误，使用 .form-control 选择输入/选择值。

$(".form-control").children(":selected")

$("input[name='cantitate']").on("change", function () {

  var cant = $("#cantitate").val();

  var price = $(".form-control").children(":selected").attr("id");

  console.log(price)

  $("#total").text(price * cant + " USD");

});

我建议不要使用 id 作为值，而使用 value 作为值。可以按如下方式进行一些清洁。

(function ($) {

  // Input number

  const input = $("input[name='cantitate']");

  const select = $(".form-control");

  input.on("change", function () {

    calculate($(this).val(), select.children(":selected").val());

  });

  // Select box

  select.on("change", function () {

    calculate(input.val(), $(this).val());

  });

  function calculate(input, selected) {

    var cant = Number(input);

    var price = Number(selected);

    $("#total").text(`Total: ${price * cant + " USD"}`);

  }

})($);

.as-console {

  min-height: 100% !important;

}

.as-console-row {

  color: blue !important;

}

<div id="total">Total: 0</div>

    <select class="form-control" id="variantacurs" name="variantacurs">

        <option value="">---SELECT---</option>

        <option value="100">Option 1</option>

        <option value="200">Option 2</option>

        <option value="300">Option 3</option>

    </select>

    <input type="number" name="cantitate" placeholder="1" min="1" value="1">

    <script

    src="https://code.jquery.com/jquery-3.4.1.min.js"

    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

    crossorigin="anonymous"></script>