[英]how to show div on under button on onclick event
從這個代碼我有三個按鈕,現在我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>
現在這應該對你有所幫助。 您不需要為每個使用單獨的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>
在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>");
});
試試這個
$('div [id |=reply-btn]').on('click',function() {
$(this).after("<div><textarea class='the-new-com'></textarea></div>");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.