Hogyan kell felismerni Változás a szöveg beviteli mezőbe a jQuery

szavazat
0

Van két szövegbeviteli mezőbe, és szeretnék csinálni a teljes bármilyen nem a felhasználó által megadott. Az alábbiakban a kód:

$(document).ready(function(){
    var total = 0;
    $(.test).on(input, function(){
        // Print entered value in a div box
        total += parseInt($(this).val());
        $(#result).text(	total);
    });
});
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<p><input type=text class=test placeholder=Type something... id=myInput></p>
    <p><input type=text class=test placeholder=Type something... id=myInput></p>
    <div id=result></div>

Amikor bemenet 10az első, majd tart 11, akkor, ha azt írja 100, akkor vesz 111, én nem kapok, hogy miért történik ez. Amennyiben teszek egy hiba, nékem?

A kérdést 24/10/2019 12:52
a forrás felhasználó
Más nyelveken...                            


3 válasz

szavazat
2

Azon a kódot, amikor belép az első számjegyet ez számolták ki, hogy a teljes, mert total += parseInt($(this).val()). például, ha az első számjegy értéke 1, akkor abban az időben teljes frissíti a total = 1, a második gombnyomás, például, hogy 0, akkor a bemeneti teljes válik 10. azt kiszámításához a jelenlegi teljes értékét total = total + 10. ezért kapok a 11 válasz

Próbáld így.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        // Print entered value in a div box
        if ($("#myInput1").val() && $("#myInput2").val()) {
           total = parseInt(parseInt($("#myInput1").val()) + parseInt($("#myInput2").val()));
           $("#result").text(total);
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput1"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput2"></p>
<div id="result"></div>

Válaszolt 24/10/2019 12:58
a forrás felhasználó

szavazat
0

Az ok, hogy nem mutattuk be az eredményt szeretne, azért van, mert a számítás hibás. Most a szám a teljes, minden alkalommal, amikor egy beviteli mező változásait. Tehát ha beírja 123, tart a 0 + 1, majd 1 + 12, majd 13 + 123, így lesz 136 eredményt.

Írtam egy lehetséges megoldás a kérdésre. A kód a hegedű alább.

Lehet hozzá egy funkciót, ahol kiszámítja a teljes összes beviteli mezők (lehet több, mint 2, ez az általános).

function calculateTotal(){
  var total = 0;
    $( ".test" ).each(function( index ) {
      var value = $(this).val();
      if(value == ""){
        return;
      }
      total += parseInt(value);

    });
  $("#result").text(    total);
}

És a változás a beviteli mezők, csak végre ezt a funkciót.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        calculateTotal();
    });
});

A példa ebben a hegedű: https://jsfiddle.net/xL6hgder/2/

Válaszolt 24/10/2019 13:01
a forrás felhasználó

szavazat
0

A következő változás esetén, hanem a bemeneti esemény. Ez csak akkor villan, amikor az érték „elkötelezett”, ahelyett, hogy minden egyes gombnyomás. Lásd MDN a részletekért.

Válaszolt 24/10/2019 12:59
a forrás felhasználó

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more