Question

下面是我编写的代码，我想获取特定的ID来回复评论，如何使用下面的代码来做到这一点。请检查下面的代码段，并向我建议我需要遵循的方式

.anc {
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a class="anc" data-toggle="modal" id="1" data-target="#add-reply">Reply 1</a>
<a class="anc" data-toggle="modal" id="2" data-target="#add-reply">Reply 2</a>
<a class="anc" data-toggle="modal" id="3" data-target="#add-reply">Reply 3</a>
<div class="modal fade modal-add-review" id="add-reply" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
        <h4 class="modal-title">Reply</h4>
      </div>
      <div class="modal-body">

        <form class="comment-form" method="post">
          <p class="comment-notes">
            <span id="email-notes">
                Your email address will not be published.
            </span> Required fields are marked
            <span class="required">*</span>
          </p>
          <div class="row">
            <div class="form-group comment-form-author col-sm-6">
              <label for="author">Name<span class="required">*</span></label>
              <input class="form-control" id="reply_author" name="reply_author" type="text" required value="" placeholder="Enter your name">
            </div>
            <div class="form-group comment-form-email col-sm-6">
              <label for="email">Email<span class="required">*</span></label>
              <input class="form-control" id="reply_email" name="reply_email" type="email" required value="" placeholder="Enter your email">
            </div>
          </div>
          <div class="form-group comment-form-comment">
            <label for="comment">Comment<span class="required">*</span></label>
            <textarea class="form-control" id="reply_content" name="reply_content" required placeholder="Enter your message"></textarea>
          </div>
          <button class="btn btn-primary" name="create_reply" type="submit">
            <i class="fa fa-check"></i>Submit
        </button>
        </form>

      </div>
    </div>
  </div>
</div>

Answer 1

您可以这样使用：-

$('.commentBox').on('click', '.replyBtn', function(){
    $(this).parents('.commentBox');
})

<div class="commentBox">
<div class="modal fade modal-add-review" id="add-reply" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
                <h4 class="modal-title replyBtn">Reply</h4>
            </div>
            <div class="modal-body">

           <-- MODAL REPLY FORM -->

            </div>
        </div>
    </div>
</div>      
</div>

Answer 2

我使用addId参数创建了一个名为id的函数，并将其添加到所有onclick标签的a中。当用户单击a标签addId时，函数将调用ID并将其设置为隐藏的输入。

 function getId(id){
   document.getElementById("commentId").value = id;
 }

.anc {
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a class="anc" onClick="getId(1)" data-toggle="modal" data-target="#add-reply">Reply 1</a>
<a class="anc" onClick="getId(2)" data-toggle="modal" data-target="#add-reply">Reply 2</a>
<a class="anc" onClick="getId(3)" data-toggle="modal" data-target="#add-reply">Reply 3</a>
<div class="modal fade modal-add-review" id="add-reply" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
        <h4 class="modal-title">Reply</h4>
      </div>
      <div class="modal-body">

        <form class="comment-form" method="post">
          <p class="comment-notes">
            <span id="email-notes">
                Your email address will not be published.
            </span> Required fields are marked
            <span class="required">*</span>
          </p>
          <div class="row">
            <div class="form-group comment-form-author col-sm-6">
              <label for="author">Name<span class="required">*</span></label>
              <input class="form-control" id="reply_author" name="reply_author" type="text" required value="" placeholder="Enter your name">
            </div>
            <div class="form-group comment-form-email col-sm-6">
              <label for="email">Email<span class="required">*</span></label>
              <input class="form-control" id="reply_email" name="reply_email" type="email" required value="" placeholder="Enter your email">
            </div>
          </div>
          <div class="form-group comment-form-comment">
            <label for="comment">Comment<span class="required">*</span></label>
            <textarea class="form-control" id="reply_content" name="reply_content" required placeholder="Enter your message"></textarea>
          </div>
          <input type="hidden" id="commentId" name="id">
          <button class="btn btn-primary" name="create_reply" type="submit">
            <i class="fa fa-check"></i>Submit
        </button>
        </form>

      </div>
    </div>
  </div>
</div>

我如何获取要回复的特定评论的ID

2 个答案: