Javascript – Probleme im Kommentar-Antwortfeld anzeigen und ausblenden

Question

Kürzlich antworte ich auf Artikelkommentare und die Tabellenstruktur ist klar. Beim Erstellen der Startseite bin ich mir jedoch nicht sicher, ob das Antwortfeld im Voraus basierend auf der Vorlage generiert wird oder ob der js dynamisch unter dem aktuellen Kommentar hinzugefügt wird, wenn er auf die Schaltfläche „Antworten“ klickt während. Das Generieren im Voraus ist praktischer, um den Wert zu ermitteln. Im Gegensatz zur dynamischen Generierung in js bin ich mir nicht sicher, welche Lösung besser ist Ist, wie man einen Klick zum Antworten beurteilt? Klicken Sie erneut darauf, um ihn auszublenden. Die aktuelle Anzeige ist mit js nicht sehr vertraut nicht ganz klar. Ich hoffe, ein Experte kann mir einen Rat geben. Vielen Dank im Voraus

Answer 1

假如你的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();
    }
});

满意请采纳哦~

Answer 2

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