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事件中添加一个if，看看你是否处于编辑模式，如if（editingMode）{//点击内容//}

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

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

1 个答案: