Javascript 淡出和淡入$（this.parent（）.find（）重复

我一直在使用JQuery创建一个清单webapp，到目前为止进展得非常顺利，但现在我正在尝试制作可编辑的内容。我想通过淡出列表中的文本，淡出文本框，然后在完成后反转来实现这一点。检查表可在此处找到：。正如您所看到的，它是相当空白的，只需简单的添加和删除所有内容。单击“添加”时，将运行以下命令：

$('#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>'
);

正如你所看到的，我正在从E（编辑）跳回它的父对象，然后搜索可编辑的内容，看看它是否可见。我相信这是我的选择器，因为它重复我的console.log

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

有什么想法吗？

---

谢谢。

您应该像这样重新构造代码：

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

$（文档）.ready（函数（）{
$（'#添加'）。单击（函数（）{
$（“#清单”）。追加(
“
TextE-
”
);
});
$（'c'）.live（“单击”，函数（）{
//控制台日志（“删除”）；
$（this.parent（）.remove（）；
});
$（“.done”）.live（“单击”，函数（）{
如果（$（this）.is（':checked'））{
$（this.parent（）.fadeTo（'slow'，0.5）；
}否则{
//console.log（'test'）；
$（this.parent（）.fadeTo（'slow'，1）；
}
});
$（“.edit”）.live（“单击”，函数（）{
如果（$（this）.parent（）.find（'.content'）。是（':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'）；
}否则{
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'）。单击（函数（）{
$（'li'）.remove（）；
});
});

---

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

您应该像这样重新构造代码：

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

$（文档）.ready（函数（）{
$（'#添加'）。单击（函数（）{
$（“#清单”）。追加(
“
TextE-
”
);
});
$（'c'）.live（“单击”，函数（）{
//控制台日志（“删除”）；
$（this.parent（）.remove（）；
});
$（“.done”）.live（“单击”，函数（）{
如果（$（this）.is（':checked'））{
$（this.parent（）.fadeTo（'slow'，0.5）；
}否则{
//console.log（'test'）；
$（this.parent（）.fadeTo（'slow'，1）；
}
});
$（“.edit”）.live（“单击”，函数（）{
如果（$（this）.parent（）.find（'.content'）。是（':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'）；
}否则{
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'）。单击（函数（）{
$（'li'）.remove（）；
});
});

---

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

我真不敢相信自己已经回答了多少次了。。。同样的问题lol。。。请阅读有关设置超时、间隔和队列的信息

这里有一个例子

---

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

我真不敢相信自己，我已经回答了多少次了。。。同样的问题lol。。。请阅读有关设置超时、间隔和队列的信息

这里有一个例子

---

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

谢谢你的帮助！我不敢相信我竟然没有想到这个。。。我以前看过好几次了。谢谢你的帮助！我不敢相信我竟然没有想到这个。。。我以前见过很多次。可能重复[slidetoggle上消除弹跳球效果]（）可能重复[slidetoggle上消除弹跳球效果]（）