1

できるだけわかりやすくしようと思います。いくつかのコードがありますが、コメントを複製して、ユーザーからの入力テキストを含む新しいコメントをこのコードに挿入する方法がわかりません。

<!DOCTYPE html>
<!-- 
this is a comment, the above indicates the formal document type 
(like what a file extension does, but as part of the document)
-->
<html>

<head>
  <!-- the head section is things that aren't visible on the page, like the title -->
  <title>Da Blog</title>

  <!-- we'll put lots more in here later -->

  <link rel="stylesheet" type="text/css" href="jquery.css" />
  <script src="jquery.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>

<body>
  <!-- the body is where the visible stuff goes -->

  <br/><br/><br/>
  <hr>
  <h1>My Uber Fake Blog</h1>
  <hr>

  <p>
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
This is a wall of text for my uber fake blog!!!!
</p>


<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Add a comment</h3>
    </div>
    <div class="panel-body">
        <form id="comment_form">
        <div class="form-group">
            <input type="textbox" id="comment_name" placeholder="Name"
             class="input-large form-control"/>
        </div>
        <div class="form-group">
            <textarea rows="4" cols="60" id="comment" placeholder="Comment"
             class="form-control"></textarea>
        </div>
        <div class="form-group">
            <button id="post" class="btn" onclick="myFunction()">Post</button>
        </div>
        </form>
    </div>
</div>



<div id="comment_list">
    <div class="panel panel-default comment">
        <div class="panel-heading">etomai</div>
        <div class="panel-body">
            This is my comment.  I think the post is too long.
        </div>
    </div>

    <div class="panel panel-default comment">
        <div id="Commentinblog" class="panel-heading">etomai</div>
        <div class="panel-body">
            This is my comment.  I think the post is too long.
        </div>
    </div>
</div>

</div>
</div>


</body>

</html>

私はこれを試して、少なくともどこかで開始できるかどうかを確認しました。

function myFunction()
{
// Create a new, plain <span> element
var sp1 = document.createElement("div");

// Get a reference to the element, before we want to insert the element
var sp2 = document.getElementById("Commentinblog");
// Get a reference to the parent element
var parentDiv = sp2.parentNode;

// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
}

しかし、これがどのように機能するかについて頭を悩ませているようには見えません。w3schools サイトは基本を理解するのに役立ちましたが、まだ難しい概念であり、理解しようとしています。ユーザーが入力したコメントとテキストを使用してこれを複製し、更新する方法を誰かが理解するのを手伝ってくれますか? また、誰かが私がそれをよりよく理解するのを手伝ってくれるなら。

4

1 に答える 1

0

コードにデフォルトの JavaScript と jquery が混在しているため、機能しません。これを試して：

function myFunction() {

    var $newDiv = $('<div class="panel panel-default comment"><div class="panel-heading">' + $('#comment_name').val() + '</div><div class="panel-body">' + $('#comment').val() + '</div></div>');

    // if you want the new comment on top of the old ones, use this line
    $newDiv.prependTo('#comment_list');

    // if you want the new comment below the old ones, use this line
    $newDiv.appendTo('#comment_list');

}
于 2013-09-24T15:20:17.087 に答える