如何在onclick事件下的按钮下显示div

Question

从这个代码我有三个按钮，现在我cliked **回复按钮1 **意味着我想显示一个textarea按钮的底部（回复按钮1）.else我必须选择回复按钮2意味着我想要显示textarea对于这个回复按钮2 ..我不知道该怎么办。我是新开发者请帮帮我一些

 <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <a href="javascript:void(0)" rel="<?php echo $com['id']//1?>" class="reply-btn"><i class="fa fa-reply"></i> Reply button 1</a> </span> </span> <p>Lorem ipsum dolor sit amet,</p> <span class="date pull-right">19-Apr-2016 </span> </div> </div> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <a href="javascript:void(0)" rel="<?php echo $com['id']//2?>" class="reply-btn"><i class="fa fa-reply"></i> Reply button 2</a> </span> </span> <p>Lorem ipsum dolor sit amet,</p> <span class="date pull-right">19-Apr-2016 </span> </div> </div> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <a href="javascript:void(0)" rel="<?php echo $com['id']//3?>" class="reply-btn"><i class="fa fa-reply"></i> Reply button 3</a> </span> </span> <p>Lorem ipsum dolor sit amet,</p> <span class="date pull-right">19-Apr-2016 </span> </div> </div> 

点击该按钮后我想显示这个

  <textarea class="the-new-com"></textarea> 

Answer 1

现在这应该对你有所帮助。 您不需要为每个使用单独的ID

JS

$('.reply-btn').on('click',function() {
  $(this).closest('.comment').next('.reply').html("<div><textarea class='the-new-com'></textarea></div>");
})

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="comment">
  <div class="img-thumbnail">
    <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
  </div>
  <div class="comment-block">
    <div class="comment-arrow"></div>
    <span class="comment-by">
      <strong>Kani</strong>
      <span class="pull-right">
       <a href="javascript:void(0)" rel="<?php echo $com['id']//1?>" id="reply-btn-1" class="reply-btn"><i class="fa fa-reply"></i> Reply button 1</a>
      </span>
    </span>
    <p>Lorem ipsum dolor sit amet,</p>
    <span class="date pull-right">19-Apr-2016 </span>
  </div>

</div>
<div class="reply"></div>


<div class="comment">
  <div class="img-thumbnail">
    <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
  </div>
  <div class="comment-block">
    <div class="comment-arrow"></div>
    <span class="comment-by">
      <strong>Kani</strong>
      <span class="pull-right">
       <a href="javascript:void(0)" rel="<?php echo $com['id']//2?>"id="reply-btn-2" class="reply-btn"><i class="fa fa-reply"></i> Reply button 2</a>
      </span>
    </span>
    <p>Lorem ipsum dolor sit amet,</p>
    <span class="date pull-right">19-Apr-2016 </span>
  </div>

</div>
<div class="reply"></div>

<div class="comment">
  <div class="img-thumbnail">
    <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg">
  </div>
  <div class="comment-block">
    <div class="comment-arrow"></div>
    <span class="comment-by">
      <strong>Kani</strong>
      <span class="pull-right">
       <a href="javascript:void(0)" rel="<?php echo $com['id']//3?>" id="reply-btn-3" class="reply-btn"><i class="fa fa-reply"></i> Reply button 3</a>
      </span>
    </span>
    <p>Lorem ipsum dolor sit amet,</p>
    <span class="date pull-right">19-Apr-2016 </span>
  </div>

</div>
<div class="reply"></div>

Answer 2

在jQuery下面使用这个...并且还包括以下js库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$('.reply-btn').on('click',function() {
  $(this).after("<div><textarea class='addedText'></textarea></div>");
});

Answer 3

试试这个

$('div [id |=reply-btn]').on('click',function() {

  $(this).after("<div><textarea class='the-new-com'></textarea></div>");

});

https://jsbin.com/