如何防止第二個textarea編輯器出現？

Question

這是我想要實現的：我有一個代碼可以生成一個段落標記和一個div標記，具體取決於點擊了哪個按鈕。如果我生成一個段落或一個div，我可以單擊任意一個進行選擇，然後再次單擊以取消選擇。如果我選擇正在生成的段落（背景顏色發生變化），textarea編輯器將顯示，如果我取消選擇，它將隱藏。相同的任務適用於div標籤。例如，我遇到的問題是，如果我選擇了p標籤，然後嘗試選擇div標籤，那麼只需滑動textarea編輯器，我想要阻止這樣的操作：如果選擇元素，只需顯示textarea編輯器即可特定的元素，直到我取消選擇。然後我可以選擇另一個元素。

這是一個鏈接，如果你想檢查我的項目，所以你可以更好地理解和編輯，如果你想。 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; 

}); 
}); 
}); 

謝謝！

Answer 1

你的第二個文本框是你的HTML一個<input type ="text" />

難道這就是你的意思是：http://jsfiddle.net/RzvV5/97/

如果你想防止被點擊其他div的，你應該使用一個變量，如「editingMode = true「，然後在完成編輯時設置爲false。那麼，如果在click事件添加看，如果你在編輯模式一樣，如果（editingMode）{//點擊的東西//}

希望，幫助，這就是你腦子裏什麼:)