從基於另一個問題前面的回答陣列

Question

編輯字段jQuery的計算器，下一步就是將小型計算器...

for (var i = 0; i < animals.length; i++) { 
    output.push('<p>' + animals[i] + '<input class="pull-right" value="0" />' + '</p>'); 

JS Fiddle

我試圖讓與jQuery的輸入值val（）但沒有成功... 還有其他建議嗎？

正如你在的jsfiddle列表看到的是這樣的：

貓0

狗0

猴子0

總：

所以，如果用戶更新貓爲2狗是1，我想總共顯示3。

謝謝。

編輯： Link to previous questions

Answer 1

請參考fiddle

在文本框中變化的情況，請增加一個功能，如下

$(".animals-input").change(function(e) { 
    calculator(); 
}); 

function calculator() 
{ 
    var result = parseInt(0); 
    $(".animals-input").each(function(){ 
    result = result + parseInt($(this).val()); 
    $("#total-animals").html("Total:"+result); 
    }); 
} 

UPDATE

中序總重拖你需要添加我的計算器方法在你的droppable事件。所以你的代碼看起來像這樣

$(".animals-box").droppable({ 
    drop: function(event, ui) { 
     if ($(".animals-box img").length == 0) { 
     $(".animals-box").html(""); 
     } 
     ui.draggable.addClass("dropped"); 
     var elem = ui.draggable[0].getAttribute('id').split('-')[1]; 
     animals.splice(animals.indexOf(elem), 1); 
     var output = []; 
     for (var i = 0; i < animals.length; i++) { 
     output.push('<p>' + animals[i] + '<input class="pull-right" value="0" />' + '</p>'); 
     } 
     $('#list').html(output.join("")); 
     $(".animals-box").append(ui.draggable); 
     $('#list').html(output.join("")); 
     calculator(); // Add this method into your existing code you will get the result. 
    } 
    }); 
}); 

這是一個樣本Fiddle。請檢查它是否適用於您

我希望這會幫助你。

Answer 2

你必須從你想要得到的值，並添加總，並顯示在總場輸入字段。 你可能想添加一個按鈕，點擊調用一個js函數，該函數從所有字段獲取值並添加它們，然後最後將值附加到「＃total-animals」。

<button type="button">Add</button> 

var total=0; 
$('button').click(function() { 
    //you may want to make a loop here and provide each of the input fields some id. 
    //inside the loop: 
     total+=$("#id_of_input_field).val(); 
    //when the loop ends do this. 
    var el="<div>total="+total+</div>"; 
    $("#total-animals").append(el); 
} 

Answer 3

因爲我不知道是什麼拖&下降代碼的目的，我在下面撥弄刪除。

您可以檢查小提琴鏈接。

JS Fiddle

for (var i = 0; i < animals.length; i++) { 
    output.push('<p>' + animals[i] + '<input class="animals-input pull-right" data-id='+animals[i]+' value="0" />' + '</p>'); 
} 
$('#list').html(output.join("")); 

$(".animals-input").change(function(e) { 
    var number = parseInt(e.currentTarget.value); 
    var animal = $(e.currentTarget).attr("data-id"); 
    animalTotal[animal] = number; 
    countTotal(animalTotal); 
}) 

function countTotal(total) { 
    var t = 0; 
    for(var i in total) { 
    t += total[i]; 
    } 
    $("#total-animals").html("Total:"+t); 
} 

的不同部分是我將在每個輸入追加一個動物id來識別哪個輸入值被改變。

它可以計算輸入值改變時的總值。

希望它能幫助你。

Answer 4

只需在js的末尾加上這個。

如果他輸入的不是數字，你應該測試用戶輸入。如果您在您的頁面中使用它，您還需要在輸入文本中添加一個類用於其他目的。

$('input:text').on('change',function(){ 
    var total = 0; 
    $("input:text").each(function() { 
    total += parseInt($(this).val()); 
    }); 

    $('#total-animals').html("Total: " + total); 
});