如何使用jQuery更改/编辑段落/ div的文本？ [英] How to change/edit the text of a paragraph/div using jQuery?
问题描述
现在我要做的是更改/编辑段落和/或div标签的文本。这两个元素都是使用自己的增量ID动态创建的。我希望用户能够在textarea中输入文本，这将改变段落或div的文本。当他们选择段落或div时，textarea应该以用户可以更新文本的方式出现。
Now what I'm trying to do is to change/edit the text of a paragraph and/or a div tag. Both elements are created dynamically with their own incremental id. I want the user to be able to enter a text in a textarea which would change the text of a paragraph or div. When they select the paragraph or div a textarea should appear that way users can update the text.
问题：
因为我在两个元素上都设置了增量ID我很难得到它们。
Problem: Since I have set the incremental ID on both elements its hard for me to get them.
我怎样才能实现这个目标？
How can I achieve this?
这是我的代码我一直在努力
This is the code I've been working on
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>
推荐答案
有一个比大页码更简单的解决方案你在尝试。最好的方法是：
There's a much simpler solution than the big page of code you're trying. The best way to do this is:
- 设置保存点击的div / p的事件
- 创建一个JavaScript函数来显示textarea
- 用tex / p的内容填充textarea
- 添加一个更新点击的保存按钮div / p
- 添加关闭按钮，以便他们再次隐藏文本区域
- Set an event that saves the clicked div/p
- Make a JavaScript function to display a textarea
- Fill the textarea with the contents of the div/p
- Add a save button that updates the clicked div/p
- Add a close button for when they want to hide the textarea again
我做了一个 简单的jsFiddle ，这完美地说明了这一点。
I've made a simple jsFiddle that illustrates this perfectly.
编辑：我已经更新了jsFiddle。
I've updated the jsFiddle.
这篇关于如何使用jQuery更改/编辑段落/ div的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
