Question

我正在尝试添加.appendTo另一个<div>的项目结果每次点击项<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

计算总数的代码需要在三个按钮中的每个按钮内部.click功能。目前它只被召唤一次。

Answer 2

修改您的事件处理程序：

<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 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();
});

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

4 个答案: