.on('Input')动态更新和添加 [英] .on('Input') dynamic updates and additions

问题描述

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

I have a set of HTML number inputs with ID's

YXS, YSM, YMED

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

I can get the values of each input, add them together, and display the result to #output.

但是，仅当以YXS，YSM，YMED的顺序输入时，它才起作用

HOWEVER, it only works when entered in order YXS, YSM, YMED

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

If i remove YSM so its blank, i only get YXS as a value output to #output.

我正在尝试使用它，因此无论输入什么值，它们都将加在一起并显示，或者如果仅输入1个值，则无论输入顺序如何，该值都会显示给#output.

Im trying to work it, so what ever values are entered, they're either added together and displayed, or if only 1 value is entered, then that value is displayed to #output regardless of the order of input.

我整天都在挠头，所以在可能的情况下寻求帮助！

Ive been scratching my head with it all day, so looking for some help where possible!

这是我的代码:

$('#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(例如)未定义.

Which didnt work out either and console would tell me that yxsInput (for example) is not defined.

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

Hope ive explained well enough what my end goal is!

非常感谢，

推荐答案

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

Your problem is that your input event handlers are nested. So YSM and YMED trigger if only YXS is triggered.

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

Actually you don't need to have a separate handler for each input. See the snippet below:

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

这篇关于.on('Input')动态更新和添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！