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的克隆格包裹點擊

回答

相關問題