Question

我有一个评论表单，每个评论都有回复按钮。

页面加载后，

回复表单最初为display:none，回复按钮会在点击时触发显示表单（reply_form）：

回复表单

<div class="reply_form" style="display:none;">

<form role="form" id="reply_form" style="margin-top:20px;">

    <input type="hidden" name="email" value="<?php echo $_SESSION['loggedIn'] ?>">
    <input type="hidden" name="list_id" value="<?php echo $list->list_id ?>">
    <input type="hidden" name="parent_id" id="parent_id" value=""/>
    <input type="hidden" name="reply_to" id="reply_to" value=""/>

    <div class="form-group">
        <label class="sr-only" for="rname">Name</label>
        <input type="text" class="form-control input-sm" name="rname" value="<?php echo $list->first_name.' '.$list->last_name ?>" placeholder="Your name"><span class="error" id="rname_error"></span>
    </div>
    <div class="form-group">
        <label class="sr-only" for="rcomment">Comment</label>
        <textarea rows="3" class="form-control input-sm" name="rcomment" placeholder="Your comment"></textarea><span class="error" id="rcomment_error"></span>
    </div>

    <button type="button" class="btn btn-success" id="btn_reply_comment" data-id=>Reply Comment</button>
</form>

</div>

jquery在点击回复按钮时显示表单：

$('body').on('click','.btn_reply',function(){

    var id = $(this).data('id');
    var name = $(this).data('name');

    $("#parent_id").val(id);
    $("#reply_to").val(name);
    $("#reply_form").attr("id",$("#reply_form").attr("id") + id);
    $(".quickReplyForm").hide();

    $(this).after('<div class="quickReplyForm">'+$(".reply_form").html()+'</div>');

});

//reply comment
$('body').on('click','#btn_reply_comment',function(){
    var parameters = $(this).closest('#reply_form').serialize();
    var btn = $(this);
    btn.button('loading')
    //alert(parameters);

    $.ajax({
        url: 'inc/callback/request_reply_comment.php',
        type: 'POST',
        data: parameters,
        dataType: 'json',
        success: function(response){
            if(response.success == 'success'){
                $('#reply_form')[0].reset();
                loadComments(list_id);

            }else{
                $('[id$="_error"]').html('');
                $.each(response.error, function(key, value){
                    if(value){
                        $('#' + key + '_error').html(value);
                    }
                });
            }
        },
        error: function(){
            console.log(arguments);
        }
    }).always(function(){
        btn.button('reset')
    });

});

<div class="quickReplyForm">阻止输出回复表单：，

while($row = $res->fetch_assoc()){

    $msg .= '
            <div class="bs-callout bs-callout-info">
                <h5><b>'.$row['name'].'</b> <small>'.date('M d, Y @ h:i A', strtotime($row['date'])).'</small></h5>
                <p>'.$row['comment'].'</p>
                <p><button type="button" class="btn btn-xs btn-success btn_reply" data-name="'.$row['name'].'" data-id="'.$row['id'].'"><span class="glyphicon glyphicon-share-alt"></span> Reply</button></p>
                <div class="quickReplyForm"></div>
            </div>';
}

我的问题是，如何通过动态回复按钮为每个表单分配不同的ID？我可以获取数据属性var id = $(this).data('id');并仅将其分配到此行$("#reply_form").attr("id",$("#reply_form").attr("id") + id);。

如屏幕截图所示，如果单击评论2，如何使用id="reply_form2"为每个表单提供ID，依此类推......？

enter image description here

Answer 1

ID必须始终是唯一的。

使用自定义数据值或form_1 ... form_8等唯一ID。然后使用$('#form_'+yourid)或$('.form[data-id='+yourid']')

找到您的元素

Answer 2

创建这些按钮时，只需根据注释ID为每个按钮分配一个ID [查看按钮标签内的ID]：

while($row = $res->fetch_assoc()){
    $msg .= '<div class="bs-callout bs-callout-info">
             <h5><b>'.$row['name'].'</b> <small>'.date('M d, Y @ h:i A', strtotime($row['date'])).'</small></h5>
            <p>'.$row['comment'].'</p>

            <p><button id="comment-id" type="button" class="btn btn-xs btn-success btn_reply" data-name="'.$row['name'].'" data-id="'.$row['id'].'">

            <span class="glyphicon glyphicon-share-alt"></span> Reply</button></p>
            <div class="quickReplyForm"></div>
        </div>';
}

现在每当发生点击事件时，只需从按钮中选择评论ID，如下：

$('body').on('click','#btn_reply_comment',function(){
    var comment_id = $(this).attr('id');
    // Do what ever you want to do with this ID
}

Jquery动态地根据按钮点击为表单分配不同的id

2 个答案: