appendTo с упорядочением, возможно, appendTo - неправильная вещь для использования? - PullRequest
Новая
       8

appendTo с упорядочением, возможно, appendTo - неправильная вещь для использования?

0 голосов
/ 24 августа 2011

Я хочу иметь 3 флажка, давайте назовем их checkbox1, checkbox2 и checkbox3. 

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
</div>
<div id="endingpoint"></div>
</form>

Я настроил их так, чтобы при установке флажка он использовал appendTo для перемещения их из «запускауказать "до" конечной точки ".Работает нормально.Проблема в том, что я хочу, чтобы они оставались в хронологическом порядке (в порядке, в котором они начали).

ТАК ... если я проверил "checkbox3", а затем "checkbox1", я хочу, чтобы результат был таким: 

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
</div>
</form>

НО ... с помощью метода appendTo работает, яполучите это (обратите внимание, что «checkbox3» выше «checkbox1») 

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
</div>
</form>

Как я могу сохранить их в хронологическом порядке, особенно в том порядке, в котором они начались. Возможно, appendTo не является решением?

ДОБАВЛЕНО В ОТВЕТ НА КОММЕНТАРИЙ: 

<script type="text/javascript">
$(function(){
$('#test input').attr('checked', false);
$('#test input').click(function(){
    if (this.checked) {
        $(this).closest('div').hide().appendTo("#endingpoint").fadeIn(1000)
    }
    else {
        $(this).closest('div').hide().appendTo("#startingpoint").fadeIn(1000)
    }
});
});
</script>

Ответы [ 3 ]

1 голос
/ 24 августа 2011

Я бы выбрал более простое решение с использованием заполнителей, но если вам действительно нужен алгоритм для неограниченного числа ящиков, вы можете сделать это http://jsfiddle.net/rkw79/zCVGZ/:

Пометить все div с атрибутом: 

$('#startingpoint div.clickdiv').each(function(i,o) {
    $(o).attr('order', i);
});

Вставить в конечную точку на основе их атрибута 'order': 

$('#startingpoint').delegate('div.clickdiv', 'click', function() {
    var clickeddiv = $(this).detach();
    if (clickeddiv.attr('order') == 0) {
        $('#endingpoint').prepend(clickeddiv);
    } else {
        var inserted = false;
        $('#endingpoint div.clickdiv').each(function(i,o) {
            if (clickeddiv.attr('order') < $(o).attr('order')) {
                $(o).before(clickeddiv);
                inserted = true;
                return false;
            }
        });
        if (!inserted) {
            $('#endingpoint').append(clickeddiv);
        }
    }
});
0 голосов
/ 24 августа 2011

Я полагаю, вы добавляете в "тест" div. это поведение тогда логично. последний добавленный внизу.

попробовать: 

$('input').click(function () {
  $(this).insertAfter('#endingpoint');
);

edit: ну, вы добавили свой скрипт, я думаю, теперь вы знаете, что делать. используйте «insertAfter» вместо «appendTo»

0 голосов
/ 24 августа 2011

Простым решением было бы иметь три пустых элемента div в качестве дочерних элементов конечной точки, использовать идентификаторы или другой атрибут для их идентификации. Когда флажок установлен, html соответствующего div в конечной точке устанавливается на флажок html.

Обновление (ответ на комментарий):

Вы можете настроить свой код так, чтобы он не имел значения, сколько есть флажков. Вы можете получить индекс объекта, установив атрибут 'order', например, затем вызвать this.attr ('order') , чтобы получить значение заказа и добавить к $ ('# clickDiv' + заказ) . Вы также можете использовать атрибут ID и простое манипулирование строками для того же эффекта.

...