javascript - 淡出和淡入并重复 $(this).parent().find()

Question

我一直在使用 JQuery 创建一个 list Web 应用程序，到目前为止一切进展顺利，但现在我正在尝试制作可编辑的内容。我想通过淡出列表中的文本并淡出文本框中的文本来实现此目的，然后在完成后反转。该 list 可以在这里找到: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

别担心你不是第一个，也可能不会是最后一个:)