.on('Input') 动态更新和添加

Question

我有一组带有 ID 的 HTML 数字输入

YXS, YSM, YMED

我可以获取每个输入的值，将它们相加，然后将结果显示到#output。

但是，它仅在按 YXS、YSM、YMED 顺序输入时有效

如果我删除 YSM 使其空白，我只会将 YXS 作为值输出到#output。

我正在尝试使用它，所以无论输入什么值，它们要么加在一起并显示，或者如果只输入一个值，那么无论输入顺序如何，该值都会显示到#output。

我整天都在摸不着头脑，所以尽可能寻求帮助！

这是我的代码：

$('#YXS').on("input", function() {
    var yxsInput = this.value;
    console.log(yxsInput);
    var Silver = (yxsInput / 100) * 90;               
    var Gold = (yxsInput / 100) * 85;             
    var Plat = (yxsInput / 100) * 80;
    var totalPrice = Number(yxsInput);
    $('#output').text(yxsInput);
    $("#output_Silver").html(Silver.toFixed(2));
    $("#output_Gold").html(Gold.toFixed(2));
    $("#output_Plat").html(Plat.toFixed(2));

    $('#YSM').on("input", function() {
    var ysmInput = this.value;
    console.log(ysmInput);
    var totalPrice = Number(yxsInput)+Number(ysmInput);
    var Silver = (totalPrice / 100) * 90;                 
    var Gold = (totalPrice / 100) * 85;           
    var Plat = (totalPrice / 100) * 80;
    $('#output').text(totalPrice);
    $("#output_Silver").html(Silver.toFixed(2));
    $("#output_Gold").html(Gold.toFixed(2));
    $("#output_Plat").html(Plat.toFixed(2));

    $('#YMED').on("input", function() {
    var ymedInput = this.value;
    console.log(ymedInput);
    var totalPrice = Number(yxsInput)+Number(ysmInput)+Number(ymedInput);
    var Silver = (totalPrice / 100) * 90;                 
    var Gold = (totalPrice / 100) * 85;           
    var Plat = (totalPrice / 100) * 80;
    $('#output').text(totalPrice);
    $("#output_Silver").html(Silver.toFixed(2));
    $("#output_Gold").html(Gold.toFixed(2));
    $("#output_Plat").html(Plat.toFixed(2));
    });
});

我尝试过先获取输入

$('#YXS').on("input", function() {
    var yxsInput = this.value;
    console.log(yxsInput);

    $('#YSM').on("input", function() {
    var ysmInput = this.value;
    console.log(ysmInput);

    $('#YMED').on("input", function() {
    var ymedInput = this.value;
    console.log(ymedInput);

这也没有解决，控制台会告诉我 yxsInput（例如）没有定义。

希望我已经充分解释了我的最终目标是什么！

非常感谢，

Answer 1

您的问题是您的 input 事件处理程序是嵌套的。所以只要 YXS 被触发，YSM 和 YMED 就会触发。

实际上，您不需要为每个输入设置单独的处理程序。请参阅下面的 sn-p：

$('#YXS, #YSM, #YMED').on("input", function() {
        var totalPrice = 0;
        $('#YXS, #YSM, #YMED').each(function(i, e) {totalPrice += ~~e.value});
        var Silver = totalPrice * 0.9;                 
        var Gold = totalPrice * 0.85;           
        var Plat = totalPrice * 0.8;
        $('#output').text(totalPrice);
        $("#output_Silver").html(Silver.toFixed(2));
        $("#output_Gold").html(Gold.toFixed(2));
        $("#output_Plat").html(Plat.toFixed(2));
    });

label, h3 {display:flex;
justify-content:space-between;
width:14rem; margin:1rem 0; padding:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>YXS: <input id="YXS"></label>
<label>YSM: <input id="YSM"></label>
<label>YMED: <input id="YMED"></label>

<h3>Silver: <span id="output_Silver">0.00</span></h3>
<h3>Gold: <span id="output_Gold">0.00</span></h3>
<h3>Plat: <span id="output_Plat">0.00</span></h3>
<h3>Total: <span id="output">0</span></h3>