li元素的jQuery编辑内容

Question

我正在用jQuery制作简单的待办事项列表，并且遇到了关于如何通过双击编辑li元素的内容的问题。我写了一个函数，但它不起作用。

这里是我的代码：http://jsfiddle.net/strangeviking/1vwho2ru/3/：

function addListItem() { 
 
    var text = $('#new-text').val(); 
 
    $("#todolist").append('<li><input type="checkbox" class="edit" />' + text + ' <button class="delete">Delete</button></li>'); 
 
    $("#new-text").val(''); 
 
}; 
 

 
function deleteItem() { 
 
    $(this).parent().remove(); 
 
} 
 

 
function finishItem() { 
 
    if ($(this).parent().css('textDecoration') == 'line-through') { 
 
    $(this).parent().css('textDecoration', 'none') 
 
    } else { 
 

 
    $(this).parent().css('textDecoration', 'line-through'); 
 
    } 
 
} 
 

 
function editItem(e) { 
 
    var $input = $(e.target).closest('li').addClass('editing').find('.edit'); 
 
    $input.val($input.val()).focus(); 
 
} 
 

 
$(function() { 
 
    $('#new-text').keyup(function(e) { 
 
    if (e.keyCode === 13) { 
 
     addListItem(); 
 
    } 
 
    }); 
 
    $(document).on('click', '.delete', deleteItem); 
 
    $(document).on('click', '.edit', finishItem); 
 
    $(document).on('dblclick', '.edit', editItem); 
 
    $("#select_all").click(function() { 
 
    $('input:checkbox').not(this).prop('checked', this.checked); 
 
    if ($('li').css('textDecoration') == 'line-through') { 
 
     $('li').css('textDecoration', 'none') 
 
    } else { 
 

 
     $('li').css('textDecoration', 'line-through'); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>List</h1> 
 

 
<input type="text" id="new-text" /> 
 
<ul id="todolist"></ul> 
 
<br> 
 
<input type="checkbox" id="select_all" />Select all

Answer 1

我发现了一些其他的方法改变元素。这里是代码：

var oriVal; 
    $("#todolist").on('dblclick', 'span', function() { 
     oriVal = $(this).text(); 
     $(this).text(""); 
     $("<input type='text'>").appendTo(this).focus(); 
    }); 
    $("#todolist").on('focusout', 'span > input', function() { 
     var $this = $(this); 
     $this.parent().text($this.val() || oriVal); 
     $this.remove(); // Don't just hide, remove the element. 
    }); 

它需要一些改进，例如，为可编辑可见的，而编辑它，然后按“Enter”键提交，但它使它的基本功能。

Answer 2

而不是使用DoubleClick进行编辑，你可以使用HTML5的contenteditable属性。

你会做的改变是增加一个span中的文本在这条线：

$("#todolist").append('<li><input type="checkbox" class="edit" /> <span contenteditable="true">' + text + ' </span><button class="delete">Delete</button></li>'); 

function addListItem() { 
 
    var text = $('#new-text').val(); 
 
    $("#todolist").append('<li><input type="checkbox" class="edit" /><span contenteditable="true">' + text + ' </span><button class="delete">Delete</button></li>'); 
 
    $("#new-text").val(''); 
 
}; 
 

 
function deleteItem() { 
 
    $(this).parent().remove(); 
 
} 
 

 
function finishItem() { 
 
    if ($(this).parent().css('textDecoration') == 'line-through') { 
 
    $(this).parent().css('textDecoration', 'none') 
 
    } else { 
 

 
    $(this).parent().css('textDecoration', 'line-through'); 
 
    } 
 
} 
 

 
function editItem(e) { 
 
    var $input = $(e.target).closest('li').addClass('editing').find('.edit'); 
 
    $input.val($input.val()).focus(); 
 
} 
 

 
$(function() { 
 
    $('#new-text').keyup(function(e) { 
 
    if (e.keyCode === 13) { 
 
     addListItem(); 
 
    } 
 
    }); 
 
    $(document).on('click', '.delete', deleteItem); 
 
    $(document).on('click', '.edit', finishItem); 
 
    $(document).on('dblclick', '.edit', editItem); 
 
    $("#select_all").click(function() { 
 
    $('input:checkbox').not(this).prop('checked', this.checked); 
 
    if ($('li').css('textDecoration') == 'line-through') { 
 
     $('li').css('textDecoration', 'none') 
 
    } else { 
 

 
     $('li').css('textDecoration', 'line-through'); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>List</h1> 
 
<input type="text" id="new-text" /> 
 
<ul id="todolist"> 
 
</ul> 
 
<br> 
 
<input type="checkbox" id="select_all" />Select all

_fiddle