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