Jquery 如何防止第二个textarea编辑器出现？

这就是我试图完成的：我有一个生成段落标记和div标记的代码，这取决于单击的按钮。如果生成一个段落或div，我可以单击其中一个进行选择，然后再次单击以取消选择。如果我选择正在生成的段落，背景颜色将发生变化，文本区域编辑器将显示，如果我取消选择，它将隐藏。同样的任务也适用于div标记。例如，我遇到的问题是，如果我选择p标记，然后尝试选择div标记，它只会滑动textarea编辑器，我想防止这样的情况：如果选择了元素，则只显示该特定元素的textarea编辑器，直到我取消选择为止。然后我可以选择另一个元素并继续

这里是一个链接，如果你想签出我的项目，这样你可以更好地理解，并编辑，如果你愿意。

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;

});
}); 
});

谢谢

第二个文本框是html中的

这就是你的意思吗：

如果要防止单击其他div，则应使用类似“editingMode=true”的变量，然后在完成编辑时将其设置为false。然后在单击事件中添加一个if，以查看您是否处于编辑模式，如ifeditingMode{//the click stuff/}

---

希望这有帮助，这就是你的想法：

你好，米罗，我想你忘了更新小提琴了。你发布的链接与我的相同。