Question

我一直在使用JQuery创建一个清单webapp，到目前为止它一直很顺利，但现在我正在尝试制作可编辑的内容。我希望通过淡出列表中的文本，淡入文本框，然后在完成时反转来完成此操作。清单可以在这里找到：The Checklist。你可以看到它是相当空白的，只需添加和删除所有。单击“添加”时，将运行以下命令：

$('#add').click(function(){
$('#checklist').append(
'<li class="item"><span class="text"><cnt class="content">Text</cnt><input type="text" name="tester" class="editor" /><edt class="edit">E</edt></span><c>-</c><input type="checkbox" class="done"/></li>'
);

这样就可以很好地创建列表项。

快进，当你添加一个，编辑它，并完成编辑它工作正常。如果你添加一堆，一次说5，然后你尝试编辑其中一个顶部的;它会很好地切换到文本框，但是当你完成编辑后，它会淡出并重新进入。

我相信这与我的选择器有关，这就是我的工作方式：

$(".text > .edit").click(function(){
console.log ("You're doing it right");
//console.log ($(this).parent());
if ($(this).parent().find('.content').is(':visible') ) { 

var editvar = $(this).parent().find('.content').text();
$(this).parent().find('.content').fadeOut('slow');
$(this).parent().find('input[name="tester"]').val(editvar);
$(this).parent().find('.editor').fadeIn('slow');
//console.log(editvar);

}
//if ($(this).parent().find('.content').is(':hidden') ) { 
else{
console.log("You're doing it wrong");
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
//console.log(editvar);
}
});

正如您所看到的，我从E（编辑）跳回到它的父级，然后搜索可编辑的内容以查看它是否可见。我相信它是我的选择器，因为它重复我的console.logs。

我知道这不是最干净的方式，但我对JQuery相对较新，我正在努力学习。

有什么想法吗？感谢。

Answer 1

我无法相信自己有多少次我回答过这个问题...同样的问题大声笑...请阅读有关settimeout和间隔以及队列的信息

这是一个示例Eliminate bouncing ball effect on slidetoggle

不要担心你不是第一个，你可能不会是最后一个：）

Answer 2

您应该重新构建代码：

$(document).ready(function(){
    $('#add').click(function(){
    $('#checklist').append(
    '<li class="item"><span class="text"><cnt class="content">Text</cnt><input type="text" name="tester" class="editor" /><edt class="edit">E</edt></span><c>-</c><input type="checkbox" class="done"/></li>'
    );
});
$('c').live("click", function(){
    //console.log("remove");
    $(this).parent().remove();
});

$(".done").live("click", function(){
    if ($(this).is(':checked')) {
        $(this).parent().fadeTo('slow', 0.5);
    } else{
      //console.log('test');
      $(this).parent().fadeTo('slow', 1);
    }
});

$(".edit").live("click", function(){
    if ($(this).parent().find('.content').is(':visible') ) { 
        var editvar = $(this).parent().find('.content').text();
        $(this).parent().find('.content').fadeOut('slow');
        $(this).parent().find('input[name="tester"]').val(editvar);
        $(this).parent().find('.editor').fadeIn('slow');    
    }else{
        var editvar = $(this).parent().find('input[name="tester"]').val();
        $(this).parent().find('.editor').fadeOut('slow');
        $(this).parent().find('.content').text(editvar);
        $(this).parent().find('.content').fadeIn('slow');
    }
}); 

$('#RemAll').click(function(){
    $('li').remove();
});
});

您应该对要动态添加的元素使用live（），这样一旦将事件处理程序添加到页面中，事件处理程序就会附加到它们。

淡出和使用$（this）.parent（）。find（）重复

2 个答案: