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

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

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

我怎样才能做到这一点？

这是我一直在研究的代码

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

jQuery的：

$(document).ready(function(){ var pid = 1; $("#addP").on({ click: function(){ var pr = $('
').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 = $('
').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 = $('
'); var del = $('Delete'); $('#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：

  P tag or Div tag

   
 

Answer 1

有一个比你正在尝试的大页面代码简单得多的解决方案。 最好的方法是：

• 设置保存单击的div / p的事件
• 创建一个JavaScript函数来显示textarea
• 使用div / p的内容填充textarea
• 添加一个保存按钮，用于更新单击的div / p
• 添加关闭按钮，以便他们再次隐藏textarea

我做了一个简单的jsFiddle ，完美地说明了这一点。

编辑：我已经更新了jsFiddle。

Answer 2

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

 $('.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，它将被复制到段落中。 根据您的需要使用。 根据需要使用On / Live。