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

Question

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

Answer 1

我创建了一个 fiddle ，我想这就是你想要的:

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

在 fiddle 中点击要编辑的文本，然后将焦点移出输入元素，您的文本将保存，输入元素将隐藏。

已更新

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

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

Updated fiddle

希望对您有所帮助!