0

这就是我想要完成的事情：我有一个代码可以生成一个段落标记和一个 div 标记，具体取决于单击的按钮。如果我生成一个段落或一个 div，我可以单击其中一个来选择，然后再次单击以取消选择。如果我选择正在生成的段落（背景颜色更改），则会出现一个文本区域编辑器，如果我取消选择，它会隐藏。同样的任务也适用于 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;

});
}); 
});

谢谢！

4

1 回答 1

0

您的第二个文本框<input type ="text" />在您的 html 中

这是你的意思吗：http: //jsfiddle.net/RzvV5/97/

如果你想防止其他 div 被点击，你应该使用一个变量，比如 'editingMode=true'，然后在完成编辑时设置为 false。然后在点击事件中添加一个 if 以查看您是否处于编辑模式，例如 if(editingMode){ //点击的东西 //}

希望对您有所帮助，这就是您的想法:)

于 2012-05-10T05:55:40.893 回答