如何使用jQuery制作可编辑的列表项？

Question

我想使用从数据库中提取的数据在列表视图中显示用户信息。现在我的目标是使列表视图可编辑，以便当用户单击任何列表视图时，它会像“文本框”一样响应并出现键盘（适用于移动设备）。编辑完成后，用户可以按“保存”按钮将他/她的可编辑内容保存到数据库中。我在 Adob​​e PhoneGap API 中使用 HTML、jQuery 和 CSS。

Answer 1

我创建了一个小提琴，我认为这就是你想要的：

http://jsbin.com/ijexak/2/edit

在小提琴上单击要编辑的文本并在输入元素的 focusOut 上单击，您的文本将保存，输入元素将隐藏。

更新

我检查了你的评论，你应该试试这个：

html

   <ul>
       <li>
           <span class="display">erum</span>
           <input type="text" class="edit" style="display:none"/>
       </li>
       <li>
           <span class="display">ingress</span>
           <input type="text" class="edit" style="display:none"/>
       </li>
   </ul>

JS

$(".display").click(function(){
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

$(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
});

更新的小提琴

希望能帮助到你！