JQuery的克隆格包裹点击

http://jsfiddle.net/TDmRv/1/JQuery的克隆格包裹点击

我想要做什么：我想用ID“theDiv”的div来围绕被输入到网页中的文字包裹。我想这样，文本将出现在创建的多个div中。

解释更多： 好了，我所要做的就是输入一些输入，并把它与在正常工作一div-显示，但我想在div环绕它，当我点击输入。所以每次我点击“添加”文本被包装成一个div并显示。但是我也试图让这个出现多次，所以每次我添加输入div都缠绕在文本上。最后，我试图将这两个按钮放置在那里，我假设在使用Jquery单击“添加”时必须插入这两个按钮。我只需要一些指导，因为我很难理解这将如何工作。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#edit").click(function(){ 
    $("#theDiv").css("background-color","red"); 
    }); 
}); 
$(document).ready(function(){ 
    $("#delete").click(function(){ 
    $("#theDiv").remove(); 
    }); 
}); 
$(document).ready(function(){ 
    $("#add").click(function(){ 
    $('#edit').wrap('<div class="theDiv" />'); 
    }); 
}); 
</script> 
<style> 
#theDiv { 
    border: 1px solid rgb(204, 204, 204); 
    margin: 5px 0pt; 
    padding: 5px; 
    background-color: blue; 
    height:50px; 
    } 
button { 
    float:right; 
} 
</style> 
</head> 
<body> 
<div id="hold"> 
<button id="edit">Edit</button><button id="delete">Delete</button> 
</div> 
<form> 
    <div><textarea class="textI" id="textI2" style="width: 400px; height: 50px;"></textarea></div> 
    <div><input type="button" id="add"value="add" onclick="theDiv_append()" /></div> 
</form> 
<script language="javascript"> 
$('.textI').each(function() { 
    var default_value = this.value; 
    $(this).focus(function() { 
     if(this.value == default_value) { 
      this.value = ''; 
     } 
    }); 
}); 
function theDiv_append() { 
    $('#theDiv').append($('#textI2').val()); 
} 
</script> 
</body> 
</html>

来源

2012-07-13 Web Owl

如果不够清楚，我会重新说明。 – 2012-07-13 02:34:07

很难理解你的问题。 – banzomaikaka 2012-07-13 02:34:22

我觉得我在编辑时更清楚了。 – 2012-07-13 02:38:20

试试这个，改＃将点击这个，它工作在的jsfiddle，只需添加文字，我没有这样做，但你会看到如何添加新的蓝格

  $("#add").click(function(){ 
      var newRow = $('#theDiv').clone(); 
      $('#hold').append(newRow); 
      $('#edit').wrap('<div class="theDiv" />'); 
       }); 
      });

来源

2012-07-13 02:42:33

你太棒了！谢谢。我想我也可以隐藏第一个div。 – 2012-07-13 02:45:05

但现在出现这个问题，我该如何编辑和删除工作？ – 2012-07-13 02:45:21

嗯，它克隆它，所以文本保持不变，从最后一个... ...该死，这是不正确的。 – 2012-07-13 02:46:17

JQuery的克隆格包裹点击

回答

相关问题