2

今私がやろうとしているのは、段落のテキストやdivタグを変更/編集することです。両方の要素は、独自の増分IDを使用して動的に作成されます。段落または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>
4

2 に答える 2

5

試しているコードの大きなページよりもはるかに簡単な解決策があります。これを行うための最良の方法は次のとおりです。

  • クリックしたdiv/pを保存するイベントを設定します
  • テキストエリアを表示するJavaScript関数を作成します
  • テキストエリアにdiv/pの内容を入力します
  • クリックしたdiv/pを更新する保存ボタンを追加します
  • テキストエリアを再度非表示にする場合の閉じるボタンを追加します

これを完全に説明する簡単なjsFiddleを作成しました。

編集：jsFiddleを更新しました。

于 2012-05-07T05:57:40.213 に答える
1

私があなたの質問を正しく理解し、divとparagraphのインクリメンタルID部分が同じである場合は、これを試してみてくださいdiv_class。各divにクラスsayを追加します。それで

$('.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でコピーされます。必要に応じてご使用ください。必要に応じてオン/ライブを使用します。

于 2012-05-07T05:48:08.620 に答える