Fatal编程技术网
  • javascript/
  • Javascript 分区'；s内容编辑器

Javascript 分区'；s内容编辑器

javascript jquery html

Javascript 分区'；s内容编辑器,javascript,jquery,html,textarea,edit,Javascript,Jquery,Html,Textarea,Edit,我有以下代码： <html> <head> <title></title> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(document).ready(function() {

我有以下代码：

<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>


$（文档）.ready（函数（）{
$（“#k123”）。单击（函数（）{
//var text=$（this）.val（）；//这不起作用
var text=$（this.text（）；
变量k=''+text+'
'；
$（此）。替换为（k）；
});
}); 
函数save（）{
}
函数cancel（）{
//警报（文本）；
var k=''；
$（“#k123”）。替换为（k）；
}
AAAA
我的问题是:

1） 在两个功能中：取消和保存，如何获取div id->#k123->textarea->content的内容 函数cancel&save不在作用域内，它们是独立的函数，我无法告诉$（this）.parent（）

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

**请不要建议从输入按钮发送div id

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

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

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

});

$（文档）.ready（函数（）{
$（“#k123”）。单击（函数（）{
var text=$（this.text（）；
变量k=''+text+'
'；
$（此）。替换为（k）；
});
//$（“#k123>输入”）。单击（函数（）{
$（“#k123”）。子项（“输入：秒”）。单击（函数（）{
警报（“hi”）；
});
});
谢谢。

修订版-作品

看看这个…不太清楚，但很近

函数editit（）{
var divId=$（this.attr（'id'）；
var text=$（this.html（）；
变量k=''+text+'
'；
$（'#'+divId）.替换为（k）；
$（“#取消”+divId）。单击（函数（）{
$（'#'+divId）.替换为（''+text+''）；
$（'.editable'）.bind（'单击'，编辑它）；
});
$（“#保存”+divId）。单击（函数（）{
$（'#'+divId）.replace为（'+$（“#newvalue”+divId.val（）+”）；
$（'.editable'）.bind（'单击'，编辑它）；
});
}
$（'.editable'）.bind（'单击'，编辑它）；
下面是我为您准备的工作代码。您甚至不需要id。只需要一个容器div和事件委派。下面以我认为更简单、更高效的方式完成了我认为您所追求的目标：

（我添加了注释以帮助理解代码）

$（文档）.ready（函数（）{
$（“.container”）。在（'click'，函数（e）{
如果（！$（e.target）.is（'input'）&&（！$（e.target）.is（'textarea'））{//检查以确保目标既不是输入也不是textarea
var div_text=$（e.target）.text（）；//使用名为text以外的变量，因为text已经是另一个元素的方法
$（e.target）.data（'text'，div_text）；//将div的当前内容设置为隐藏数据属性，稍后检索。如果希望取消以完全擦除div，则可以删除此行和另一行。
变量k=''+div_text+'
；
$（e.target）.html（k）；//设置div的内部html，这样就不会丢失保存到该div的任何数据
}
if（$（e.target）.is（'input'）&&（$（e.target）.val（）='save'）{
$（e.target）.parent（）.html（$（e.target）.parent（）.find（'textarea'）.val（））；//将父div的当前内容替换为其中的textarea内容。
}else if（$（e.target）.is（'input'）&&（$（e.target）.val（）='cancel'））{
$（e.target）.parent（）.html（$（e.target）.parent（）.data（'text'））；//将内容设置为存储在数据属性中的旧内容。只需将.html（）的内容替换为“”即可将其完全清除。
}
});
});​

问题比这更详细。这个答案无法解决问题。@VIDesignz但我需要知道如何在函数cancel和函数中获取div的idsave@VIDesignz第一次工作。第二次不允许你编辑time@eawedat请参阅我的答案，了解一个可以多次工作的解决方案。为什么不能使用
$（this）.parent（）呢
？由于
save（）
和
cancel（）
是由onlick属性激发的
$（此）
将是激发函数的
输入元素。
$（此）。父（'div'）
将给您第一个父（
div
元素。看起来像是他的$（“#k123”）。单击（）只需获取div内容并用textform包装它…不确定重点是什么is@Zefiryn如果我想获取textarea的内容，它是这样的吗？$（this）.parents（“div”）.children（“textarea”）.text（）；还是
$（this）.sibbines（“textarea”）.val（）
如果您同时只有一个
textarea
level@Zefiryn我试过了，它给了我一个未定义的提示：SAs注意，为了绑定到动态创建的元素，你需要委托事件，这就是为什么VI的答案不起作用。我试过上面的其他方法，你能检查一下它为什么起作用吗？@eawedat我不明白为什么你不接受这个答案。它有工作代码。你的代码不工作，因为元素是动态创建的，因此点击事件没有绑定到它。我当然接受你的答案，我非常感谢你。但我想知道我的我的不工作。正如你说的，如果我想让我的工作，我应该使用。绑定（'click？@eawedat不是
.bind（）
，
.on（）
。该方法是最新的。若要委派元素，应

function editit() {

        var divId = $(this).attr('id');

        var text = $(this).html();

        var k = '<div id="' + divId + '" class="editable"><textarea id="newvalue' + divId +'" rows="10" cols="10">' + text + '</textarea><br /><input id="save'  + divId + '" type="button" value="save"><input id="cancel'  + divId + '" type="button" value="cancel"></div>';

        $('#' + divId).replaceWith(k);

        $('#cancel' + divId).click(function() {
            $('#' + divId).replaceWith('<div id="' + divId + '" class="editable">' + text + '</div>');
            $('.editable').bind('click', editit);
        });

        $('#save' + divId).click(function() {
            $('#' + divId).replaceWith('<div id="' + divId + '" class="editable">' + $("#newvalue" + divId).val()+ '</div>');
            $('.editable').bind('click', editit);
        });

    }

 $('.editable').bind('click', editit);



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