0

これは私が達成しようとしているものです: クリックされたボタンに応じて、段落タグと div タグを生成するコードがあります。段落または div を生成する場合、いずれかをクリックして選択し、もう一度クリックして選択を解除できます。生成されている段落を選択すると (背景色が変わります)、テキストエリア エディターが表示され、選択を解除すると非表示になります。同じタスクが div タグに適用されます。たとえば、私が抱えている問題は、p タグを選択してから div タグを選択しようとすると、テキストエリア エディターをスワイプするだけで、次のようにそれを防ぎたいということです。要素が選択されている場合は、そのテキストエリア エディターを表示するだけです。選択を解除するまで、特定の要素。次に、別の要素を選択します。

私のプロジェクトをチェックアウトして理解を深め、必要に応じて編集したい場合は、ここにリンクがあります。 http://jsfiddle.net/RzvV5/97/

jQuery

$(document).ready(function(){


$('#Test').on('click', '.test-p', function() {
         editEl = $(this);
         $('#editor-d').hide();
         $('#editor-p').show();
         $('#editor-p textarea').val($(editEl).html());
});
$('#Test').on('click', '.test-d', function() {
         editdiv = $(this);
         $('#editor-p').hide();
         $('#editor-d').show();
         $('#editor-d textarea').val($(editdiv).html());
});

$('#editor-p textarea').change(function() {
$(editEl).html($('#editor-p textarea').val());
});
$('#editor-d textarea').change(function() {
$(editdiv).html($('#editor-d textarea').val());
});
$('#editor-p textarea').change(function() {
$(editEl).html($('#editor-p textarea').val());
});
$('#editor-d textarea').change(function() {
$(editdiv).html($('#editor-d textarea').val());});


var pid = 1;
$("#addP").on({
    click: function(){
        var pr = $('<p />').attr({class:'test-p', '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 div = $('<div />').attr({'class':'test-d', 'id':'div_' + divid}).text('This is a div ' + divid);  
             var d = $("#Test");
             var pclone = $(div).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>');

var flag = false;
$("#Test").on("click", "p, div", function(){ 
    var cur = $(this).css("background-color");

     if(cur=="rgb(255, 255, 255)") { 
          if(flag==false){
               $(this).css("background-color","#FDD").addClass("help insider").after(div);
                flag = true;
          }
    }else { 
     $('#editor-p').hide();
     $('#editor-d').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();
$('#editor-p').hide();

flag = false;

});
}); 
});

ありがとう！

4

1 に答える 1

0

2 番目のテキスト ボックスは<input type ="text" />html にあります

これはあなたが意味するものですか: http://jsfiddle.net/RzvV5/97/

他の div がクリックされないようにする場合は、「editingMode=true」などの変数を使用し、編集が終了したら false に設定する必要があります。次に、クリック イベントに if を追加して、if(editingMode){ //クリックのもの //} のような編集モードにあるかどうかを確認します。

それが役に立てば幸いです。それがあなたが念頭に置いていたことです:)

于 2012-05-10T05:55:40.893 に答える