现在我要做的是更改/编辑段落和/或div标签的文本。这两个元素都是使用自己的增量 id 动态创建的。我希望用户能够在文本区域中输入文本,这将更改段落或div 的文本。当他们选择段落或div时,文本区域应该以用户可以更新文本的方式出现。
问题:由于我已经在两个元素上设置了增量 ID,因此我很难获得它们。
我怎样才能做到这一点?
这是我一直在处理的代码
http://jsfiddle.net/RzvV5/93/
j查询:
$(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/p
- 创建一个 JavaScript 函数来显示文本区域
- 用div/p 的内容填充文本区域
- 添加一个保存按钮,用于更新单击的div/p
- 添加关闭按钮,以便他们想要再次隐藏文本区域
我制作了一个简单的jsFiddle来完美地说明这一点。
编辑:我已经更新了jsFiddle。
如果我答对了你的问题,并且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 中输入,并且要根据自己的需要复制它。根据需要使用开/实时。