评论回复框的显示与隐藏问题

Question

最近在做文章评论回复，表结构清楚了。但是在做前台页面的时候，不确定回复框框是预先根据模板生成出来，还是当用户点击回复按钮时，js动态添加到当前评论下方，想了一下。预先生成，在取值上面会方便点，不像js动态生成还要find元素，append元素啥的，这一点拿不定，不知道哪个方案好点，第二的问题就是，怎样判断点击一次回复，显示回复框，再点击一次就隐藏，点击其他回复按钮时，原先的回复框隐藏，当前的显示，js不是很熟，这边的逻辑不太清楚，希望大牛指点迷津。先谢谢你们了

Answer 1

假如你的HTML结构如下

<div class="article">
    <button class="reply-btn">回复</button> 
    <div class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </div>
</div>
<div class="article">
    <button class="reply-btn">回复</button> 
    <div class="comment-wrap">
      <input class="comment-input">
      <button class="comment-btn">提交评价</button>    
    </div>
</div>

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();
    }
});

满意请采纳哦~

Answer 2

建议找一个tab切换学一下 原理差不多