javascript - jQuery UI 待办事项列表不起作用，需要一些指导

Question

我正在使用 jQuery UI，我尝试创建一个“待办事项列表”应用程序。我让它运行到一定程度，但任务不会在我尝试创建的排序 div 中正确显示。它应该显示为带有删除按钮和已完成选项的“栏”。但它目前显示为文本。我是否也应该在 html 中直接内嵌 jQuery？

这是我的应用程序当前状态的 fiddle :

Todo List App FIDDLE

我将只显示编码的 jQuery 部分。完整版本在 Fiddle 上。

$("document").ready(function() {

$('#due_date').datepicker();
$('#add_task').button({ icons: { primary: "ui-icon-circle-plus" } }).click(function() { 
$('#new_task').dialog('open'); }); // end click
$('#new_task').dialog({ width: 350, 
                       height: 300, 
                        modal: true, 
                     autoOpen: false, 
                        close: function() { 
$('#new_task input').val(' '); /*clear fields*/
                }, buttons: { 
    "Add Task" : function() {
            var task_name = $('#task').val(); 
            var due_date = $('#due_date').val();
            var begin_li = '<li><span class="done">%</span><span    class="delete">x</span>';
            var task_li = '<span class="task">' + task_name + '</span>'; 
            var date_li = '<span class="due_date">' + due_date + '</span>'; 
            var end_li = '</li>'; 
$('#task_list').prepend(begin_li + task_li + date_li + end_li); 
$('#task_list').hide().slideDown(250).find('li:first') 
               .animate({ 'background-color':'rgb(255,255,204)' },250) 
               .animate({ 'background-color':'white'},750)
               .animate; 
// end animate 
$(this).dialog('close'); 
}, "Cancel" : function() { 
$(this).dialog('close');
    } 
  } 
}); 
// end dialog
//Marking as complete
$('#task_list').on('click', '.done', function() {
    var task_item = $(this).parent('li');
    var $this = $(this);
        $this.detach();
            $('#completed_list').prepend($this);
            $this.slideDown();
    });
});
//Sortable
$('.sortlist').sortable({
    connectWith: '.sortlist', 
         cursor: 'pointer', 
    placeholder: 'ui-state-highlight', 
         cancel: '.delete,.done' 
}); 
//Delete
$('.sortlist').on('click','.delete', function() { 
  task_item.effect('puff', function() {
    $(this).remove(); 
    }); 
  });

非常感谢您的帮助和指导!

Answer 1

一个问题是您的点击事件。您只是将 .done span 元素移动到完成的列表中。试试这个:

$('#task_list').on('click', '.done', function () {
    var $this = $(this);
    var task_item = $this.parent('li');
    $this.detach();
    $('#completed_list').prepend(task_item);
    task_item.slideDown();
});

在这种情况下，span.done 仍然被删除，但整个 li 元素被移动到下部列表。

您的 CSS 也有问题，更正代码如下:

#task_list li, #completed_list li {
    border: 1px solid rgba (0, 0, 0, 0.3);
    padding-top: .1em;
    line-height: 170%;
    margin-top: .2em;
}

原代码在rgba后多了一个花括号，估计对后续代码有影响。

编辑 删除功能也有点故障。这是更正后的代码:

$('.sortlist').on('click', '.delete', function () {
    var task_item = $(this).parent('li');
    task_item.effect('puff', function () {
        $(this).remove();
    });
});

(基本上，task_item 未定义)。

关于标题，问题在于 id 属性必须是唯一的，但是在您的 HTML 中，有 2 个元素具有 id="task"。如果您将输入标签更改为:

<input type="text" name="task_title" id="task_title">

...和您的 jQuery 代码:

var task_name = $('#task_title').val();

...标题应该出现。