jQuery UI待办事项列表不工作，需要一些指导

jQuery UI Todo List not working, need some guidance

本文关键字：工作 UI 列表 jQuery      更新时间：2023-09-26

我正在使用jQuery UI，我尝试创建一个"待办事项列表"应用程序。我让它在某种程度上起作用，但任务不会在我试图创建的排序div中正确显示。它应该显示为一个带有删除按钮和完成选项的"栏"。但它目前显示为文本。我是否应该将jQuery直接内联到html中?

这是我的应用程序在它的当前状态的提琴:

待办事项列表App FIDDLE

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

$("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(); 
    }); 
  });

非常感谢帮助和指导!

一个问题是你的点击事件。您只是将.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();

…标题应该出现

相关文章：