Question

我想动态地将注释添加到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>

Answer 1

具有相同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()。

Answer 2

这里存在多个问题

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

尝试

<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("");
    });
});

演示：Fiddle

Answer 3

这应该有用，不要忘记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>

jquery生成动态列表

3 个答案: