如何使用 jQuery 更改/编辑段落/div 的文本？答案

【问题标题】：How to change/edit the text of a paragraph/div using jQuery?如何使用 jQuery 更改/编辑段落/div 的文本？
【发布时间】：2012-05-08 09:44:55
【问题描述】：

现在我要做的是更改/编辑段落和/或 div 标签的文本。这两个元素都是使用自己的增量 ID 动态创建的。我希望用户能够在 textarea 中输入文本，这将更改段落或 div 的文本。当他们选择段落或 div 时，应该会出现一个文本区域，以便用户可以更新文本。

问题：由于我在这两个元素上都设置了增量 ID，因此我很难获得它们。

我怎样才能做到这一点？

这是我一直在处理的代码

http://jsfiddle.net/RzvV5/93/

jQuery:

$(document).ready(function(){

var pid = 1;
$("#addP").on({
    click: function(){
        var pr = $('<p />').attr({'class':'test', 'id':'paragraph_' + pid}).text('This is a paragraph ' + pid);
        var d = $("#Test");
        var pclone = $(pr).clone();
        pclone.on({
            mouseenter: function(){    
                $(this).addClass("inside");
            },
            mouseleave: function(){                             
                $(this).removeClass("inside"); 
            },
                    });
        pclone.appendTo(d);
pid++;
    }
});
var divid = 1;
$("#addDiv").on({
    click: function(){
        var pr = $('<div />').attr({'class':'test', 'id':'div_' +     divid}).text('This is a div ' + divid);
        var d = $("#Test");
        var pclone = $(pr).clone();
        pclone.on({
            mouseenter: function(){    
                $(this).addClass("inside");
            },
            mouseleave: function(){                             
                $(this).removeClass("inside"); 
            },
                    });
        pclone.appendTo(d);
divid++;
    }
});




var div =  $('<div class="customD" id="d"></div>');
var del = $('<a href="#" class="delete" id="erase">Delete</a>');

$('#updateP').hide();
$('#updateD').hide();

var flag = false;
$("#Test").on("click", "p", function(){ 
var cur = $(this).css("background-color");


   if(cur=="rgb(255, 255, 255)") {  
       if(flag==false){
           $('#updateP').show();
            $('#updateD').show();

    $(this).css("background-color","#FDD").addClass("help insider").after(div);
flag = true;

}

}
else { 
 $('#updateP').hide();
 $('#updateD').hide();

            $(this).css("background-color","white").removeClass('help insider');
 $(div).remove();
flag = false;
}    
$(div).append(del);  


$(".delete").on("click",function(){
    $(this).parent().prev().remove();
$(this).remove();
flag = false;

});


}); 

$('#updateP').change(function(){
var a = $(this).val();
$('p').text(a);

});
id++;     
});

HTML：

 <a href="#" id="addP">P tag</a> or <a href="#" id="addDiv">Div   tag</a><br/><br/>
    <textarea id="updateP"></textarea>
    <textarea id="updateD"></textarea>

    <div id="Test"></div>

【问题讨论】：

是否可以将 div id 存储在您生成并将 Div 添加到文档中的代码中的某处？然后可以通过更新代码检索它。另一种选择是您也生成更新代码（脚本标记元素）并将其附加到文本区域。

标签： jquery edit paragraph

【解决方案1】：

有一个比您尝试的大量代码更简单的解决方案。最好的方法是：

设置保存点击的div/p的事件
制作一个 JavaScript 函数来显示一个文本区域
用 div/p 的内容填充 textarea
添加更新点击的div/p的保存按钮
当他们想再次隐藏文本区域时添加一个关闭按钮

我制作了一个 simple jsFiddle 完美地说明了这一点。

编辑：我已经更新了 jsFiddle。

【讨论】：

我了解您的解决方案，但如果您想在jsfiddle.net/RzvV5/93查看我的工作，请点击此处链接，谢谢！
@jQueryster：我已经更新了 jsFiddle 链接来做我认为你想要的。
嗨本杰明，你所做的更新是我需要的，必须根据我的代码进行调整。根据我的想法，我遇到了另一个问题：如果用户单击段落，则显示#editorForParagraph，或者如果用户单击div，则显示#editorForDiv，换句话说，每个元素都应该有自己的编辑器.如果你愿意，我可以发布另一个问题。谢谢！
哇！我昨天很努力，但我就是想不通（很快就知道我是否是初学者，完全了解 Javascript/jQuery）。感谢本杰明大师！

【解决方案2】：

如果我的问题是正确的，并且 div 和段落的增量 id 部分是相同的，你可以试试这个：添加一个类说 div_class 到每个 div。那么

$('.div_class').keydown(function() {//Use appropriate listener
//get the incremental_id part from the div
var incremental_id = $(this).attr('id').substring(4);

var text = $(this).text();
//Copy the text into para using appropriate function. I have assumed text will work.
$('#para_'+incremental_id).text(text);
});

我假设在 div 中输入，并将其复制到 para。根据您的需要使用。根据需要使用 On/Live。

【讨论】：