1

http://jsfiddle.net/TDmRv/1/

やりたいこと： IDが「theDiv」のdivを、ページに入力されるテキストにラップするようにします。テキストが作成された複数のdivに表示されるようにこれが必要です。

詳細： さて、私がやろうとしているのは、入力を入力して、それをdivに表示することです。これは正常に機能しますが、入力をクリックしたときにdivがそれをラップアラウンドするようにします。したがって、[追加]をクリックするたびに、テキストがdivにラップされて表示されます。しかし、これを複数回表示しようとしているので、入力を追加するたびに、divがテキストにラップされます。最後に、これら2つのボタンをそこに配置しようとしています。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>
4

1 に答える 1

3

これを試して、＃addクリックをこれに変更してください。これはjsfiddleで機能し、テキストを追加するだけです。私はそれをしませんでしたが、新しい青いdivを追加する方法がわかります。

            $("#add").click(function(){
             var newRow = $('#theDiv').clone();
             $('#hold').append(newRow);
             $('#edit').wrap('<div class="theDiv" />');
               });
           });
于 2012-07-13T02:42:33.370 に答える