javascript - Display and hide issues of comment reply box

Question

Recently I am replying to article comments, and the table structure is clear. However, when making the front page, I am not sure whether the reply box is generated in advance based on the template, or when the user clicks the reply button, the js is dynamically added below the current comment. I thought about it for a while. Generating it in advance will be more convenient in getting the value. Unlike dynamic generation in js, which requires find elements, append elements, etc., I am not sure about this. I don’t know which solution is better. The second question is, how to judge a click to reply? Show the reply box, click it again to hide it. When you click other reply buttons, the original reply box is hidden. The current display is not very familiar with js. The logic here is not very clear. I hope an expert can give me some advice. Thank you in advance

Answer 1

Suppose your HTML structure is as follows

<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. Regarding the existence of the reply content box, I personally think that it should be rendered first to avoid excessive manipulation of the DOM when clicking, which will affect efficiency. Moreover, the html code appended later may cause the js code not to take effect on it~

2. When the reply box is displayed, it has the show class. When the displayed reply box is clicked, the show class is removed to indicate that the reply box has been hidden, and then the program determines whether the reply box contains the .show class.

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

Please adopt it if you are satisfied~

Answer 2

It is recommended to find a tab switch and learn it. The principles are similar