jquery编辑评论

发布于 2024-10-17 12:27:07 字数 437 浏览 7 评论 0原文

你能解释一下制作 jquery 编辑系统的方法吗，我点击一下，然后它显示一个文本区域和一个编辑底部。

最好的方法是什么？

现在我有这个：

<div id="frame">
<div id="data">bla bla bla</div>

<a class='edit' href=''>edit</a>
</div>

<script>
$(function() {
    $('#frame a').click(function()
    {
        var data = $('#data').text();

        alert(data);
        console.log('press edit');
    })
})
</script>

原文

Can you explain the methods to make a jquery edit system where I click on a click and then it show a textarea and a edit bottom.

What is the best methods to do it?

Right now I have this:

<div id="frame">
<div id="data">bla bla bla</div>

<a class='edit' href=''>edit</a>
</div>

<script>
$(function() {
    $('#frame a').click(function()
    {
        var data = $('#data').text();

        alert(data);
        console.log('press edit');
    })
})
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只涨不跌 2024-10-24 12:27:07

我认为大多数网站（包括 StackOverflow）执行此操作的方式是使用浏览器内置的“设计模式”功能。

这里是此类编辑器的开源版本。

我修改了您的示例，这样单击编辑链接将使“bla bla bla”文本可编辑。

注意两件事：

body 标记有一个新属性，designMode，设置为“on”。
要启用编辑，数据 div 必须将 contentEditbale 属性设置为
真的。

在此处输入图像描述

回复收藏 0 原文

一百个冬季 2024-10-24 12:27:07

我想，你已经快到了。如果要编辑的数据非常简单，您可以这样做：


$(function() {
    $('#frame a').click(function()
    {
        $('#frame').html('<form action="..." method="post"><textarea name="data">' + 
          $('#data').text() + 
          '</textarea><input type="submit" value="Edit"></form>');
    })
})

如果要编辑的数据更复杂，您可能会考虑通过 AJAX 加载它们，或者将整个表单放在 html 中编辑并默认隐藏它。如果用户单击编辑按钮，您只需显示它即可。

I think, you're almost there. If data to edit are very simple, you could just do something like:


$(function() {
    $('#frame a').click(function()
    {
        $('#frame').html('<form action="..." method="post"><textarea name="data">' + 
          $('#data').text() + 
          '</textarea><input type="submit" value="Edit"></form>');
    })
})

If the data to edit are more complex, you might consider to load them via AJAX or put the whole form to edit inside the html and hide it by default. If the user clicks the edit button, you just need to show it.

回复收藏 0 原文

~没有更多了~