Question

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

这是我的应用程序的当前状态的小提琴：

Todo List 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(); 
    }); 
  });

非常感谢帮助和指导！

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();

......应该出现标题。

jQuery UI Todo List不起作用，需要一些指导

1 个答案: