在div

Question

美好的一天，

我有以下HTML代码

<form method="post" action="blog_comment_post.php" id="post_blog_comment">
    <input type="hidden" value="<?php echo $postid; ?>" name="blogid" id="blogid"/>
<textarea name="blog_comment" class="blog_comment_form" id="blog_comment" placeholder="Join the discussion"></textarea>
</form>

并且，我有以下javascript代码

 <script type="text/javascript">
     $(document).ready(function() {
     $("#post_blog_comment").keypress(function(evt) {
            if(evt.which == 13) {
               var commentform = $("#post_blog_comment");
               var blogid = $("#blogid").val();
               var comment = $("#blog_comment").val();
               $.post("blog_comment_post.php", { blogid: blogid, comment: comment},
                   function(data) {

                    var newmedia =
                    '<div class="blog_comm_hold"> \
                    <div class="user_comment_photo1"></div> \
                    <div class="blog_comment_"> \
                        <div class="blog_com_text">\
                        comment\
                        </div>\
                        </div>\
                    <br>\
                        </div>';

                    commentform.after(newmedia);
                    $('#post_blog_comment')[0].reset();
                });
             }
         });
     });
 </script>

我想要做的是当用户点击回车键时，在表单后面显示我输入到表单的textarea字段中的值。 div类加载得很好，但我不知道怎样去显示var变量的实际值。

上面可以看到的var comment变量没有显示它的值。该变量位于上述脚本中的blog_com_text div下。 我希望当用户点击回车键时，根据上面的代码将上述注释变量的值加载到相应的div中。 div类加载没有问题，但如何加载变量的值。

非常感谢。

Answer 1

您可以使用解决方案https://jsfiddle.net/xabt3vgt/

＆＃13;

＆＃13;

$(document).ready(function() {
     $("#post_blog_comment").keypress(function(evt) {
            if(evt.which == 13) {
               var commentform = $("#post_blog_comment");
               var blogid = $("#blogid").val();
               var comment = $("#blog_comment").val();
               //$.post("blog_comment_post.php", { blogid: blogid, comment: comment},
                 //  function(data) {

                    var newmedia =`<div class="blog_comm_hold">
                    <div class="user_comment_photo1"></div> 
                    <div class="blog_comment_">
                        <div class="blog_com_text">
                        ${comment}
                        </div>
                        </div>
                    <br>
                        </div>`;

                    commentform.after(newmedia);
                    $('#post_blog_comment')[0].reset();
                //});
             }
         });
     });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="blog_comment_post.php" id="post_blog_comment">
    <input type="hidden" value="<?php echo $postid; ?>" name="blogid" id="blogid"/>
<textarea name="blog_comment" class="blog_comment_form" id="blog_comment" placeholder="Join the discussion"></textarea>
</form>

＆＃13;

＆＃13;

＆＃13;

你只需要取消注释你的php ajax调用。

在键盘中使用返回勾选 `（从左到右），如果要添加任何变量，请使用 $ {variable_name} 在后面打勾之间。

Answer 2

试试这个

<script type="text/javascript">
 $(document).ready(function() {
 $("#post_blog_comment").keypress(function(evt) {
        if(evt.which == 13) {
           var commentform = $("#post_blog_comment");
           var blogid = $("#blogid").val();
           var comment = $("#blog_comment").val();
           $.post("blog_comment_post.php", { blogid: blogid, comment: comment},
               function(data) {

                var newmedia = $('<div class="blog_comm_hold"><div class="user_comment_photo1" /><div class="blog_com_text" /><br></div>');
                newmedia.find('.blog_com_text').html(comment));
                commentform.after(newmedia);
                $('#post_blog_comment')[0].reset();
            });
         }
     });
 });

你可以用这个来测试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post_blog_comment"></div>

<textarea id="blog_comment"></textarea>
<input type="button" value="Go" id="postcomment" />


<script type="text/javascript">
  $('#postcomment').click(function() {
    showcomment();
  });

  function showcomment() {
    var comment = $("#blog_comment").val();
    var newmedia = $('<div class="blog_comm_hold"><div class="user_comment_photo1" /><div class="blog_com_text" /><br></div>');
    newmedia.find('.blog_com_text').html(comment);
    $('#post_blog_comment').after(newmedia);
  $("#blog_comment").val('');
  }
  
 </script>