1

我想动态地将评论添加到 html 列表中。但是评论应该根据发送它的形式进入特定列表。假设它来自表单 id=1 那么它应该进入表单 id=1 如果它来自表单 id=2 那么它应该进入列表表单 id=2 这是我的代码。我已经浪费了很多时间在网上研究它。请帮忙..

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js">  </script>         
        <script>
            var user_name = 'Danil';
            $(document).ready(function() {
                $('.comment_entry form').submit(function (e) {
                    e.preventDefault();
                    var currentId=$('form',this).attr('id');
                    var comment = $("input[type='text',id=currentId]").val();
                    $(".comments#"+currentId).append('<li><a class="commenter_name" href="/">' +     user_name + '</a>' + comment + '</li>');
                    $("input[type='text',id=currentId]").val("");
                });
            });
        </script>
    </head>
    <body>
        <ul id="1" class="comments">
        </ul>
        <div  class="comment_entry">
            <form id="1" method="post" >
                <input id="1"  type="text" placeholder="Leave comment" />
                <input type="submit" value="submit" />
            </form>
        </div>
        <ul id="2" class="comments">
        </ul>
        <div  class="comment_entry">
            <form id="2" method="post" >
                <input id="2" type="text" placeholder="Leave comment" />
                <input  type="submit" value="submit" />
            </form>
        </div>
    </body>
</html>
4

3 回答 3

0

具有相同id属性的多个元素是无效的。您的代码还有一些其他错误，但首先在 id 属性前加上元素名称 - 所以<ul id="ul-1">而不是<ul id="1">. 您还需要使用 jquery 的本机 id-selector 语法：$("#ul-1"). 最后，变量不会被插入到 JS 字符串中，所以这样的事情不会起作用：

var currentId=$('form',this).attr('id');
var comment = $("input[type='text',id=currentId]").val();

您必须自己构建字符串，例如$("#input-" + currentId + ").val().

于 2013-08-11T15:04:14.150 回答
0

这里有多个问题

元素的id应该是唯一的，您有 3 个 id 为 1 的元素，我已将 id 更改为c1，对于div、表单和输入f1字段i1comments

尝试

<ul id="c1" class="comments">
</ul>
<div  class="comment_entry">
    <form id="f1" method="post" >
        <input id="i1"  type="text" placeholder="Leave comment" />
        <input type="submit" value="submit" />
    </form>
</div>
<ul id="c2" class="comments">
</ul>
<div  class="comment_entry">
    <form id="f2" method="post" >
        <input id="i2" type="text" placeholder="Leave comment" />
        <input  type="submit" value="submit" />
    </form>
</div>

然后

var user_name = 'Danil';

$(document).ready(function() {
    $('.comment_entry form').submit(function (e) {
        e.preventDefault();
        var currentId=$(this).attr('id').substring(1);
        var comment = $('#i'+currentId).val();

        $("#c"+currentId).append('<li><a class="commenter_name" href="/">' +     user_name + '</a>' + comment + '</li>');
        $('#i'+currentId).val("");
    });
});

演示：小提琴

于 2013-08-11T15:09:04.763 回答
0

这应该可行，并且不要忘记 ID 应该是唯一的！

<!DOCTYPE html>
<html>
     <head>
> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
 <script>  
var user_name = 'Danil';
$(document).ready(function(){
   $('.commentBut``ton').click(function() {
        var currentId = $(this).parents('form').attr('id');
        var comment = $('input[id="input-' + currentId + '"]').val();
        $('ul[id="list-' + currentId + '"]').append('<li><a class="commenter_name" href="#">' + user_name + '</a> ' + comment + '</li>');
        $('input[id="input-'+currentId+'"]').val('');
   });
});
   </script>
   </head>

    <body>
    List 1
    <ul id="list-1" class="comments">
    </ul>
      <div  class="comment_entry">
         <form id="1" method="post">
           <input id="input-1" type="text" placeholder="Leave comment" />
          <input type="button" value="submit" class="commentButton"/>
         </form>
     </div>

     List 2
     <ul id="list-2" class="comments">
     </ul>
    <div  class="comment_entry">
    <form id="2" method="post" >
        <input id="input-2" type="text" placeholder="Leave comment" />
        <input  type="button" value="submit" class="commentButton"/>
    </form>
     </div>
    </body>
    </html>
于 2013-08-11T15:43:42.470 回答