添加输入的总和即appendTo另一个div

Question

我正在尝试添加其他的项目的结果我.appendTo。
我希望每次点击项目<button>时总增加。 这可能是什么结果呢.appendTo另一个<div>？

<div class="item"></div> 
<div class="total"></div> 

<button class="menu item1">Item 1</button> 
<button class="menu item2">Item 2</button> 
<button class="menu item3">Item 3</button> 

$(document).ready(function() { 
    $('.item1').click(function(){ 
     $('<div class="skill">80</div><br/>').appendTo('.item'); 
    }); 
    $('.item2').click(function(){ 
     $('<div class="skill">90</div><br/>').appendTo('.item'); 
    }); 
    $('.item3').click(function(){ 
     $('<div class="skill">100</div><br/>').appendTo('.item'); 
    }); 
}); 

$(".item").each(function() { 
    var total = 0; 
    $(this).find(".skill").each(function() { 
     total += parseInt($(this).text()); 
    }); 
    $(this).text('Total: ' + total).appendTo(".total"); 
}); 

Answer 1

修改您的事件处理程序：

<script type="text/javascript"> 

$(document).ready(function() { 

    $('.item1').click(function(){ 

     $('<div class="skill">80</div><br/>').appendTo('.item'); 

     counter(); 
    }); 

    $('.item2').click(function(){ 

     $('<div class="skill">90</div><br/>').appendTo('.item'); 

     counter();    
    }); 
    $('.item3').click(function(){ 

     $('<div class="skill">100</div><br/>').appendTo('.item'); 

     counter(); 
    }); 

    var counter = function() { 

     var total = 0; 

     $(".skill").each(function() { 

      total += +$(this).text(); 
     }); 

     $('.total').text('Total: ' + total); 
    }; 
}); 

</script> 

Demo

Answer 2

的代码计算总需要为每一个三个按钮的功能。点击里面。目前它只被调用一次。

Answer 3

简单地使每个按钮click处理器中的计算：
无需循环和项目的文本分析，如果内容是静态的。

var total = 0; 
$('.item1').click(function(){ 
    $('<div class="skill">80</div><br/>').appendTo('.item'); 
    $(".total").text('Total: ' + (total+=80)); 
}); 
$('.item2').click(function(){ 
    $('<div class="skill">90</div><br/>').appendTo('.item'); 
    $(".total").text('Total: ' + (total+=90)); 
}); 
$('.item3').click(function(){ 
    $('<div class="skill">100</div><br/>').appendTo('.item'); 
    $(".total").text('Total: ' + (total+=100)); 
}); 

JSfiddle demo

---

甚至更​​好（动态应用），是使用data attributes。这样你就可以为所有的按钮制作单一的click处理程序。

HTML：

<li><a href="#"><button data-count="80" class="add menu item1">Item 1</button></a></li> 
<li><a href="#"><button data-count="90" class="add menu item2">Item 2</button></a></li> 
<li><a href="#"><button data-count="100" class="add menu item3">Item 3</button></a></li> 
<!-- You can just put there as many items as you like, without writing extra scripts --> 

脚本（所有按键单一功能）：

var total = 0; 
$('.add').click(function(){ 
    var count = $(this).data('count'); 
    $('<div class="skill">'+count+'</div><br/>').appendTo('.item'); 
    $(".total").text('Total: ' + (total+=count)); 
}); 

JSFiddle demo

话，甚至可以进一步扩展它。 F.ex.添加一些删除按钮为每个新项目，所以total金额将减少每次该项目被删除。就像这个例子：JSFiddle

Answer 4

首先，求和功能，

function sumSkills() { 
    var $item = $('.item'), 
     $total = $('.total'), 
     total = 0; 
    $item.find('.skill').each(function (elm) { 
     total += parseInt($(elm).text(), 10); 
    }); 
    $total.text('Total: ' + total); 
} 

现在你可以使用这个代码，只要你喜欢，例如

$('.item1').click(function() { 
    $('<div class="skill">80</div><br/>').appendTo('.item'); 
    sumSkills(); 
});