个人中心
gpt4 book ai didi

javascript - Div的内容编辑器

转载 作者：行者123 更新时间：2023-12-02 19:15:23 24 4
gpt4 key购买 nike

我有这个代码:

<html>
    <head>
        <title></title>

        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#k123").click(function () {
                //var text=$(this).val(); //this does not work
                var text=$(this).text();
                var k='<div id="k123"><textarea rows="10" cols="10">' + text + '</textarea><br /><input     type="button" onclick="save();" value="save"><input type="button" onclick="cancel();"     value="cancel"></div>';
                $(this).replaceWith(k);
            });

        }); 

        function save() {
        }
        function cancel() {
            //alert(text);
            var k='<div id="k123"></div>';
            $("#k123").replaceWith(k);
        }
    </script>
    </head>
    <body>
        <div id="k123">aaaaa</div>
    </body>
</html>

我的问题是:

1)在两个功能中:取消和保存，如何获取div id->#k123->textarea->content的内容函数 cancel 和 save 超出了范围，它们是独立的函数，我无法告诉 $(this).parent()。

我需要询问 ID 为 #k123 的 div，然后进入 textarea 的内容并获取它。而且我还必须自动获取 id #k123，因为如果我有很多 div，我无法手动告诉保存和取消 div 的 id，取消和保存应该从输入 type='button'`s 父 id 知道 div 的 id 发送者。

**请我不喜欢从输入按钮发送 div id 的建议

**我们假设两个输入按钮都没有 IDS 或名称

我尝试了另一种方法，但仍然遇到同样的问题我替换了

$(document).ready(function() {
$("#k123").click(function () {
var text=$(this).text();
var k='<div id="k123"><textarea rows="10" cols="10">' + text + '</textarea><br /><input     type="button" value="save"><input type="button" value="cancel"></div>';
$(this).replaceWith(k);
});

//$("#k123 > input").click(function() {
$("#k123").children("input:second").click(function() {
alert("hi");
});

});

谢谢。

最佳答案

我在下面为您提供了工作代码。你甚至不需要 id.. 只需要一个容器 div 和事件委托(delegate)。下面的内容实现了我认为您所追求的目标，我认为这是一种更简单、更高效的方式:

(我添加了注释以帮助理解代码)

$(document).ready(function() {
    $(".container").on('click', function(e) {
        if (!$(e.target).is('input') && !$(e.target).is('textarea')) { //check to make sure the target is neither an input or a textarea
            var div_text = $(e.target).text(); // use a variable named something other than text, because text is already a method for another element
            $(e.target).data('text',div_text); // set the div's current contents as a hidden data attribute, to be retrieved later.  You can get rid of this and the other line if you want cancel to completely wipe the div.
            var k = '<textarea rows="10" cols="10">' + div_text + '</textarea><br /><input type="button" value="save"><input type="button" value="cancel">';
            $(e.target).html(k); //set the inner HTML of the div, so we don't lose any data saved to that div
        }
        if ($(e.target).is('input') && $(e.target).val() == 'save') {
            $(e.target).parent().html($(e.target).parent().find('textarea').val()); // replace the current contents of the parent div with the contents of the textarea within it.

        } else if ($(e.target).is('input') && $(e.target).val() == 'cancel') {
            $(e.target).parent().html($(e.target).parent().data('text')); //set the contents to the old contents, as stored in the data attribute.  Just replace the contents of the .html() here with '' to completely clear it.
        }
    });
});​

DEMO

关于javascript - Div的内容编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13203785/

24 4 0
文章推荐： python - 如何将带有表情符号名称的字符串转换为不和谐的表情符号？
文章推荐： java - jar在catalina主页的lib文件夹中时，context.xml中类的ClassNotFoundException
文章推荐： c - strcspn 中的 "c"代表什么？
文章推荐： c# - 如何在Docker容器中运行此PowerShell脚本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com