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

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

YXS, YSM, YMED

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

但是，仅当以YXS，YSM，YMED的顺序输入时才有效

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

我正在尝试使用它，因此无论输入什么值，它们都将加在一起并显示，或者如果仅输入1个值，则无论输入顺序如何，该值都会显示给#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（例如）未定义。

希望我能很好地解释我的最终目标是什么！

非常感谢，

最佳答案

您的问题是您的input事件处理程序是嵌套的。因此，如果仅触发YXS，则触发YSM和YMED。

实际上，您不需要为每个输入都使用单独的处理程序。请参见下面的代码段：

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