[英]how to show/hide reply comment box on multiple displayed comments
所以這是我用來顯示/隱藏評論框的代碼,它實際上有效,但是當我嘗試單擊第一個評論的回復時,我做出多個評論時遇到的問題是顯示/隱藏評論框試圖單擊其他評論,它不再起作用了,它只能在第一個評論上起作用。...有什么辦法可以解決這個問題?
HTML代碼
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>
id
在HTML頁面中必須是唯一的,您應該將id更改為類replybutton
然后reply
和jquery代碼將是,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
片段
$(document).ready(function() { $('.replybutton').click(function() { $(this).next('.reply').toggle(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div class="replybutton btn4 like" style=""> <span class="btn reply" id="replyb">Reply</span> •  </div> <div class="col-lg-12 reply" style="display:none"> <img src="img/icons/no-icon-available.png" class="pull-left" style="" /> <p> <strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/> <div class="btn4" style=""> <span style=""><abbr class="timeago" title="">time</abbr></span> </div> </p> <input type="text" class="form-control pull-right" placeholder="Write a reply..." /> </div> </div> <div class="container"> <div class="replybutton btn4 like" style=""> <span class="btn reply" id="replyb">Reply</span> •  </div> <div class="col-lg-12 reply" style="display:none"> <img src="img/icons/no-icon-available.png" class="pull-left" style="" /> <p> <strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/> <div class="btn4" style=""> <span style=""><abbr class="timeago" title="">time</abbr></span> </div> </p> <input type="text" class="form-control pull-right" placeholder="Write a reply..." /> </div> </div> <div class="container"> <div class="replybutton btn4 like" style=""> <span class="btn reply" id="replyb">Reply</span> •  </div> <div class="col-lg-12 reply" style="display:none"> <img src="img/icons/no-icon-available.png" class="pull-left" style="" /> <p> <strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/> <div class="btn4" style=""> <span style=""><abbr class="timeago" title="">time</abbr></span> </div> </p> <input type="text" class="form-control pull-right" placeholder="Write a reply..." /> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.