Question

我尝试使用appendTo将列表项移到底部。当我使用＆＃39; ul＆＃39;和＆＃39; li＆＃39;符号，但我希望它只在单击复选框时发生。所以我试着使用this.parent（），但我有点卡住了。无法查看此处出现的问题.. fiddle

我的HTML：

<div class='todo_list'>
        <div class='add_list'>&#43; List</div><br>
        <h3 contenteditable='true'>New List</h3>
        <ul>
            <li>
                <input type='checkbox' class='task_status'>
                <p class='task' contenteditable='true'> </p>
                <span class='drag'></span>
            </li>
        </ul>
        <div class='add_task'>&#43;</div><br>
    </div>

剧本：

$('.todo_list').on('click', '.task_status', function(e) {
    $(this).parent('li').css('opacity', '1');
    if ( $(this).is(':checked') ) {
        $(this).parent('li').css('opacity', '.5').delay(500).slideUp(500, function () {
            $(this).parent('li').parent('ul').appendTo( $(this).parent('li') );
            $(this).slideDown(500);
        });
    };
});

Answer 1

在slideUp的回调函数中，this的值发生了变化，现在它是LI，而不是复选框

$('.todo_list').on('click', '.task_status', function(e) {
    var LI = $(this).parent('li').css('opacity', '1');

    if ( $(this).is(':checked') ) {
        LI.css('opacity', '.5').delay(500).slideUp(500, function () {
            $(this).parent('ul').append( LI.slideDown(500) );
        });
    };
});

使用appendTo将列表项移动到底部

1 个答案: