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

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

这段代码有很多问题：标签id不是存储值的好方法。值可以存储在value属性本身中，而标签是<option>元素的实际内容。这也使得检索值变得更加容易。您可以只定义一个函数（例如calc()在我的示例中），并分配它对onchange输入的引用，而不是重复代码。使用 将Number()输入的字符串转换val()为正确的数字。例子：// Input number$('input[name=\'cantitate\']').on('change', calc);$('#variantacurs').on('change', calc);function calc() {&nbsp; &nbsp; &nbsp; var cant = Number($('#cantitate').val());&nbsp; &nbsp; &nbsp; var price = Number($('#variantacurs').val());&nbsp; &nbsp; &nbsp; $('#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">&nbsp; <option value="60" disabled selected>---SELECT---</option>&nbsp; <option value="100">Option 1</option>&nbsp; <option value="210">Option 2"</option>&nbsp; <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 () {&nbsp; var cant = $("#cantitate").val();&nbsp; var price = $(".form-control").children(":selected").attr("id");&nbsp; console.log(price)&nbsp; $("#total").text(price * cant + " USD");});我建议不要使用 id 作为值，而使用 value 作为值。可以按如下方式进行一些清洁。(function ($) {&nbsp; // Input number&nbsp; const input = $("input[name='cantitate']");&nbsp; const select = $(".form-control");&nbsp; input.on("change", function () {&nbsp; &nbsp; calculate($(this).val(), select.children(":selected").val());&nbsp; });&nbsp; // Select box&nbsp; select.on("change", function () {&nbsp; &nbsp; calculate(input.val(), $(this).val());&nbsp; });&nbsp; function calculate(input, selected) {&nbsp; &nbsp; var cant = Number(input);&nbsp; &nbsp; var price = Number(selected);&nbsp; &nbsp; $("#total").text(`Total: ${price * cant + " USD"}`);&nbsp; }})($);.as-console {&nbsp; min-height: 100% !important;}.as-console-row {&nbsp; color: blue !important;}<div id="total">Total: 0</div>&nbsp; &nbsp; <select class="form-control" id="variantacurs" name="variantacurs">&nbsp; &nbsp; &nbsp; &nbsp; <option value="">---SELECT---</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="100">Option 1</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="200">Option 2</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="300">Option 3</option>&nbsp; &nbsp; </select>&nbsp; &nbsp; <input type="number" name="cantitate" placeholder="1" min="1" value="1">&nbsp; &nbsp; <script&nbsp; &nbsp; src="https://code.jquery.com/jquery-3.4.1.min.js"&nbsp; &nbsp; integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="&nbsp; &nbsp; crossorigin="anonymous"></script>