Question

我有一个HTML列表，代表食物菜单

<ul>
<li id = "soratable1" >big burger<p>decription of big burger</p><small>$6.50</small></li>
<li id = "soratable2" >cheese burger<p>decription of cheese burger</p><small>$6.50</small></li>
<li id = "soratable3" >fish burger<p>decription of fish burger</p><small>$6.50</small></li>
<li id = "soratable4" >bacon burger<p>decription of bacon burger</p><small>$6.50</small></li>

使用jquery我将这个列为可排序列表。用户可以在此列表中添加和删除项目。要编辑我只想让用户点击文本，编辑它并在数据库中自动更新。我想在文本框中包含每个项目并用css隐藏边框，然后使用一些onfocus onblur魔法，但这看起来有点陈旧。

有什么建议吗？

Answer 1

另一种方法是使用jEditable插件。

查看@ http://www.appelsiini.net/projects/jeditable

Answer 2

您可以使用某种“编辑”图标来交换li中包含该文本的输入框中包含的文本。然后，听一下输入的onblur事件。这是一个看起来像什么的例子。 HTML：

<ul>
  <li><a id="LINK" href="#">edit</a><span id="TEXT">Text goes here</span><input id="INPUT" type="text" style="display:none" /></li>
</ul>

使用Javascript：

$(document).ready(function()
{
  $("#LINK").click(function(){
    $("INPUT").val($("#TEXT").text());
    $("INPUT").show();
    $("#TEXT").hide();
  });

  $("#INPUT").blur(function(){
    $("#TEXT").html($("INPUT").val());
    $("#INPUT").hide();
    $("#TEXT").show();
  });
});

编辑动态文本html

2 个答案: