Question

我有一组带有ID＆＃39的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。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

.on（＆＃39;输入＆＃39;）动态更新和添加

1 个答案: