JQuery копировать другой элемент Div, когда флажок установлен - PullRequest
Новая
       15

JQuery копировать другой элемент Div, когда флажок установлен

0 голосов
/ 12 января 2012

Итак, у меня есть этот хитрый (по крайней мере для меня) скрипт для написания / изменения.Ниже вы можете увидеть, как это выглядит прямо сейчас:

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 как li.Если установлено 3 флажка, то в ul будет 3 li и т. Д. ... когда вы снимите флажок, он будет удален из ul.

Я надеюсь, что мое объяснение имеет смысл.Кто-нибудь может помочь?

Ответы [ 2 ]

3 голосов
/ 12 января 2012

Я внес несколько незначительных изменений в ваш 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();
    }
});
0 голосов
/ 12 января 2012

Что-то с использованием метода clone () должно работать: 

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

Это просто добавит следующий элемент после флажка (в данном случае h2) к элементу .number, но вы понимаете,Для того, чтобы это работало правильно, вам нужно будет ввести разные значения вместо lorem ipsum для каждого, а затем проверить, существуют ли они, или удалить их при снятии флажка - не было времени записать это.

...