Как изменить/отредактировать текст абзаца/раздела с помощью jQuery?

Теперь я пытаюсь изменить/отредактировать текст абзаца и/или тега div. Оба элемента создаются динамически со своим собственным инкрементным идентификатором. Я хочу, чтобы пользователь мог вводить текст в текстовую область, которая изменит текст абзаца или div. Когда они выбирают абзац или div, должна появиться текстовая область, чтобы пользователи могли обновлять текст.

Проблема: поскольку я установил инкрементный идентификатор для обоих элементов, мне трудно их получить.

Как я могу этого добиться?

Это код, над которым я работал

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>

jquery edit paragraph
person jQueryster    schedule 07.05.2012    source источник
comment
возможно ли сохранить идентификатор div где-нибудь в коде, где вы создаете и добавляете Div в документ? Затем его можно получить с помощью кода обновления. Другой вариант заключается в том, что вы также генерируете код обновления (элемент тега скрипта) и прикрепляете его к текстовой области.   -  person Samveen    schedule 07.05.2012

Ответы (2)


arrow_upward
5
arrow_downward

Есть гораздо более простое решение, чем большая страница кода, которую вы пытаетесь сделать. Лучший способ сделать это:

  • Установите событие, которое сохраняет щелкнутый div/p
  • Создайте функцию JavaScript для отображения текстовой области
  • Заполните текстовое поле содержимым div/p
  • Добавьте кнопку сохранения, которая обновляет нажатый div/p
  • Добавьте кнопку закрытия, когда они хотят снова скрыть текстовое поле

Я сделал простой jsFiddle, который отлично это иллюстрирует.

РЕДАКТИРОВАТЬ: я обновил файл jsFiddle.

person BenjaminRH    schedule 07.05.2012
comment
Я понимаю ваше решение, но на самом деле это не то, что я ищу, вот ссылка, если вы хотите проверить мою работу на jsfiddle.net/RzvV5/93 Спасибо! - person jQueryster; 08.05.2012
comment
@jQueryster: я обновил ссылку jsFiddle, чтобы делать то, что, как я думаю, вы хотите. - person BenjaminRH; 08.05.2012
comment
Привет, Бенджамин, обновление, которое ты сделал, было тем, что мне было нужно, пришлось приспособиться к моему коду. Я столкнулся с другой проблемой в соответствии с моими идеями: если пользователь нажимает на абзац, то показывает #editorForParagraph или если пользователь нажимает на div, то показывает #editorForDiv, другими словами, у каждого из элементов должен быть свой индивидуальный редактор . Если хотите, я могу опубликовать еще один вопрос. Спасибо! - person jQueryster; 09.05.2012
comment
Ух ты! Я очень старался вчера, и я просто не мог понять (это не займет много времени, чтобы узнать, если я новичок, полностью знающий Javascript/jQuery). Спасибо гроссмейстеру Бенджамину! - person jQueryster; 09.05.2012

arrow_upward
1
arrow_downward

Если я правильно понял ваш вопрос и что инкрементная часть идентификатора для div и параграфа одинакова, вы можете попробовать следующее: добавьте класс, скажем, 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, и его нужно скопировать в параграф. Используйте в соответствии с вашими потребностями. Используйте On/Live по мере необходимости.

person TJ-    schedule 07.05.2012