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 1 の 3 つの要素があります。ID を に変更し、c1div 、フォーム、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同じ属性を持つ複数の要素を持つことは無効です。コードには他にもいくつかのバグがありますが、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 が一意であることを忘れないでください。

<!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 に答える