快速的方法來計算任意輸入可有人向我解釋

-1

誰能給我一個想法，代碼，以及如何我應該寫一個帖子後增加新的投入。將數字放入每個輸入的同一用戶相同的代碼將計算輸入中輸入的總數？任何人有想法嗎？快速的方法來計算任意輸入可有人向我解釋

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
    </head> 
    <body> 
     <button id="add">add</button> 
     <ol id="items"></ol> 
     <div id="sum"></div> 
    </body> 
</html> 

JS 

var id = "1"; 
var valarray = []; 
var sum; 

$(document).ready(function() 
{ 
    $("#add").on("click" , function() 
    { 
    $("#items").append('<li><input/><button     class="btn" dt="'+id+'">'+id+'</button></li>'); 
    id++; 
$("input").keyup(function(){ 
    valarray = []; 
    var val = $(this).val() 
    valarray.push(val); 
    console.log(val+ "\n" + valarray); 
}) 

    }) 

$("#items").on("click",".btn" , function() 
{ 
    var index = $(this).attr("dt"); 
    console.log (index); 
    $(this).parent().remove(); 
    return;  
})  
})

來源

2017-05-27 L.Shabtai

請詳細解釋*您正在嘗試完成的任務以及遇到的問題。花一些時間來回顧[問] – charlietfl

我沒有找到我正在尋找的解決方案。我看到有人問過類似的東西。他曾經使用每個功能。但是我有點不同，因爲每次點擊都會添加另一個對象。我只需要知道如何獲得解決方案。每次添加一個對象後，我都需要該對象將進入該數組。這個數組實際上給了我所有對象的總和。 –

[編輯問題]（https://stackoverflow.com/posts/44216849/edit）與這些細節，並非常具體 – charlietfl

我希望這是你在找什麼。

我已經使用了計算函數，它循環所有輸入並計算總和。我已將輸入類型更改爲數字，以便代碼中不需要額外的驗證。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
</head> 
<body> 
    <button id="add">add</button> 
    <ol id="items"></ol> 
    <div id="sum"></div> 
</body> 
<script> 

    var id = "1"; 
    var valarray = []; 
    var sum; 
    $(document).ready(function() { 

     $("#add").on("click" , function() { 
      $("#items").append('<li><input type="number" id="'+id+'"/><button class="btn" dt="'+id+'">' + id + '</button></li>'); 
      id++; 
      $("input").keyup(function (e){ 
       calculate(); 
      }); 
    }); 

    $("#items").on("click",".btn" , function(){ 
     var index = $(this).attr("dt"); 
     $(this).parent().remove(); 
     calculate(); 
     return;  
    }); 

    function calculate() { 
     sum=0; 
     $('input').each(function(i, input){ 
      sum+=input.value ? parseInt(input.value) : 0; 
     }); 
     $("#sum").html("sum: " + sum); 
    } 
}); 
</script> 
</html>

來源

2017-05-27 13:27:48

歡迎來到堆棧溢出！請添加一些額外的信息來描述這些代碼的工作原理。此外，您可能對該網站[旅遊]感興趣。 – wizzwizz4

創造一個功能叫updateTotal()，每次你怎麼稱呼它，它caculate目前共爲您提供：

function updateTotal() { 
    var sum = 0; 
    $("#items input").each(function() { 
     sum += +$(this).val() 
    }) 
    $("#total").text(sum); 
    }

然後輸入事件給所有裏面輸入#items添加：

$（'＃items'）。on（「input」，「input」，function（）{ updateTotal（） }）;

此外，當你刪除一個輸入，撥打updateTotal();

初始化使用sum = 0，然後+$(this).val()強制的值成爲數（否則它是一個字符串）。

var id = "1"; 
 

 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<li><input type="number"/><button class="btn" dt="' + id + '">' + id + '</button></li>'); 
 
    id++; 
 
    }) 
 

 
    $('#items').on("input", "input", function() { 
 
    updateTotal() 
 
    }); 
 

 
    $("#items").on("click", ".btn", function() { 
 
    var index = $(this).attr("dt"); 
 
    console.log(index); 
 
    $(this).parent().remove(); 
 
    updateTotal(); 
 
    return; 
 
    }); 
 

 
    function updateTotal() { 
 
    var sum = 0; 
 
    $("#items input").each(function() { 
 
     sum += +$(this).val() 
 
    }) 
 
    $("#total").text(sum); 
 
    } 
 

 

 

 
})

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

 
<head> 
 
    <title>Page Title</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
</head> 
 

 
<body> 
 
    <button id="add">add</button> 
 
    <ol id="items"></ol> 
 
    <div id="sum"></div> 
 
    <div>Total: <span id="total"></span></div> 
 
</body> 
 

 
</html>

來源

2017-05-27 12:46:18

快速的方法來計算任意輸入可有人向我解釋

回答

相關問題