javascript - Afficher et masquer les problèmes de boîte de réponse aux commentaires

Question

Récemment, je réponds aux commentaires d'articles et la structure du tableau est claire. Cependant, lors de la création de la première page, je ne sais pas si la boîte de réponse est générée à l'avance en fonction du modèle, ou lorsque l'utilisateur clique sur le bouton de réponse, le js est ajouté dynamiquement sous le commentaire actuel. alors que. Le générer à l'avance sera plus pratique pour obtenir la valeur. Contrairement à la génération dynamique en js, qui nécessite de rechercher des éléments, d'ajouter des éléments, etc., je n'en suis pas sûr, je ne sais pas quelle solution est la meilleure. est, comment juger un clic pour répondre ? Affichez la boîte de réponse, cliquez à nouveau dessus pour la masquer. Lorsque vous cliquez sur d'autres boutons de réponse, la boîte de réponse d'origine est masquée. L'affichage actuel n'est pas très familier avec js. pas très clair. J'espère qu'un expert pourra me donner quelques conseils. Merci d'avance

Answer 1

Supposons que votre structure HTML soit la suivante

<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. Concernant l'existence de la zone de contenu de la réponse, je pense personnellement qu'elle doit être restituée en premier pour éviter une manipulation excessive du DOM au moment du clic, ce qui affecterait l'efficacité. Et le code html ajouté plus tard peut empêcher le code js de prendre effet ~

2. Lorsque la boîte de réponse est affichée, elle a la classe show. Lorsque vous cliquez sur la boîte de réponse affichée, la classe show est supprimée pour indiquer que la boîte de réponse a été masquée, puis le programme détermine si la boîte de réponse contient le . montrer la classe.

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

Veuillez l'accepter si vous êtes satisfait~

Answer 2

Il est recommandé de trouver un interrupteur à onglets et de l'apprendre. Le principe est similaire

.