Question

所以我有这个棘手的（至少对我而言）脚本来编写/修改。您可以在下面看到它现在的样子：

HTML：

<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px; clear: right">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>

<div class="number">
    0
</div>

Javascript：

var increment2=1; 
        $('.checkbox').live('click', function() { 
        $('.number').html( '(' + increment2 + ')'); 
        increment2++; 
    })

http://jsfiddle.net/P3zMu/13/

需要做的是当你检查盒子时，容器的h2内容应该出现在ul中。如果检查了3个盒子，那么ul将是3 li等...当你取消选中该盒子时，它将从ul中移除。

我希望我的解释是有意义的。有人可以帮忙吗？

Answer 1

我对你的html做了一些小改动，并在代码下面实现了

DEMO此处

var increment2 = 1;

$('.checkbox').on('click', function() {
    $('.number').html('(' + increment2 + ')');
    increment2++;

    var $div = $(this).parent('div').get(0);

    if ($(this).is(':checked')) {        
        $('#selected_items').append('<li selected-item="' + $div.id + '_selected">' + $($div).find('h2').text() + '</li>');
    } else {
        $('#selected_items > li[selected-item^="' + $div.id + '"]').remove();
    }
});

Answer 2

使用clone（）方法的东西应该有效：

var increment2=1; 
    $('.checkbox').live('click', function() {  
    increment2++; 
    $('.number').append($(this).next().clone());
})

这只是将复选框后面的下一个元素（在本例中为h2）附加到.number元素，但是你明白了。为了使其正常工作，您需要为每个值放入不同的值而不是lorem ipsum，然后检查它们是否已存在/取消选中它们 - 没有时间写出来。

选中复选框时，jQuery复制其他div元素

2 个答案: