javascript - 評論回應框的顯示與隱藏問題
PHP中文网
PHP中文网 2017-05-19 10:14:58
0
2
754

最近在做文章評論回复,表結構清楚了。但是在做前台頁面的時候,不確定回复框是預先根據模板生成出來,還是當用戶點擊回复按鈕時,js動態添加到當前評論下方,想了一下。預先生成,在取值上面會方便點,不像js動態生成還要find元素,append元素啥的,這一點拿不定,不知道哪個方案好點,第二的問題就是,怎麼判斷點擊一次回复,顯示回覆框,再點擊一次就隱藏,點擊其他回覆按鈕時,原先的回覆框隱藏,目前的顯示,js不是很熟,這邊的邏輯不太清楚,希望大牛指點迷津。先謝謝你們了

PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(2)
小葫芦

假如你的HTML結構如下

<p class="article">
    <button class="reply-btn">回复</button> 
    <p class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </p>
</p>
<p class="article">
    <button class="reply-btn">回复</button> 
    <p class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </p>
</p>
  1. 關於回覆內容框的存在方式,個人認為是先渲染出來吧,避免點擊的時候過多地去操作DOM,影響效率。而且後面才append的html程式碼有可能會js程式碼不能在上面生效的~

  2. 回覆框顯示的時候有show類,點選已經顯示的回覆框時候就去掉類show來識別該回應框已經隱藏,然後在程式中判斷回覆框是否含有.show類。


$('.reply-btn').click(function(){
    var $commentWrap = $(this).siblings('.comment-wrap');
    // 3. 点击其他回复按钮时,原先的回复框隐藏
    $(this).parent('.article').siblings().find('show.comment-wrap').hide();
    
    // 判断点击一次回复,显示回复框,再点击一次就隐藏
    if($commentWrap.hasClass('show')){
        // 隐藏
        $commentWrap.removeClass('show').hide();
    }else{
        // 显示
         $commentWrap.addClass('show').show();
    }
});

滿意請採納哦~

为情所困

建議找一個tab切換學一下 原理差不多

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板