最近在做文章評論回復(fù)，表結(jié)構(gòu)清楚了。但是在做前臺頁面的時候，不確定回復(fù)框是預(yù)先根據(jù)模板生成出來，還是當用戶點擊回復(fù)按鈕時，js動態(tài)添加到當前評論下方，想了一下。預(yù)先生成，在取值上面會方便點，不像js動態(tài)生成還要find元素，append元素啥的，這一點拿不定，不知道哪個方案好點，第二的問題就是，怎麼判斷點擊一次回復(fù)，顯示回覆框，再點擊一次就隱藏，點擊其他回覆按鈕時，原先的回覆框隱藏，目前的顯示，js不是很熟，這邊的邏輯不太清楚，希望大牛指點迷津。先謝謝你們了
2
0
0
認證高級PHP講師
假如你的HTML結(jié)構(gòu)如下
<p class="article">
<button class="reply-btn">回復(fù)</button>
<p class="comment-wrap">
<input class="comment-input">
<button class="comment-btn">提交評價</button>
</p>
</p>
<p class="article">
<button class="reply-btn">回復(fù)</button>
<p class="comment-wrap">
<input class="comment-input">
<button class="comment-btn">提交評價</button>
</p>
</p>
關(guān)於回覆內(nèi)容框的存在方式，個人認為是先渲染出來吧，避免點擊的時候過多地去操作DOM，影響效率。而且後面才append的html程式碼有可能會js程式碼不能在上面生效的~
回覆框顯示的時候有show類，點選已經(jīng)顯示的回覆框時候就去掉類show來識別該回應(yīng)框已經(jīng)隱藏，然後在程式中判斷回覆框是否含有.show類。
$('.reply-btn').click(function(){
var $commentWrap = $(this).siblings('.comment-wrap');
// 3. 點擊其他回復(fù)按鈕時，原先的回復(fù)框隱藏
$(this).parent('.article').siblings().find('show.comment-wrap').hide();
// 判斷點擊一次回復(fù)，顯示回復(fù)框，再點擊一次就隱藏
if($commentWrap.hasClass('show')){
// 隱藏
$commentWrap.removeClass('show').hide();
}else{
// 顯示
$commentWrap.addClass('show').show();
}
});
滿意請採納哦~
