Question

我想做什么：我希望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>

Answer 1

试试这个，更改#add点击这个，它在jsfiddle工作，只是添加文字，我没有那样做，但你会看到如何添加新的蓝色div

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

如何在点击按钮时克隆div换行？

1 个答案: