Jquery 축소 축소 효과

Question

내 축소/확장 효과에 대한 안내가 약간 필요합니다. 내 코드는 다음과 같습니다.

<div class="buttons"> 
<a class="km-collapse-forms expand-all" href="#">Expand All</a> 
<a class="km-collapse-forms collapse-all hide" href="#">Collapse All</a>      
</div> 


$args = array(...); 

$comments_query = new WP_Comment_Query; 
$comments  = $comments_query->query($args); 

foreach ($comments as $comment) { 

<a class="respond-to-messages expand-form" href="#<?php echo $comment->comment_ID; ?>">Respond to message</a> 
<a class="respond-to-messages collapse-form hide" href="#<?php echo $comment->comment_ID; ?>">Hide form</a> 

<div id="comment-<?php echo $comment->comment_ID; ?>" class="comment-respond-form post-id-<?php echo $comment->comment_post_ID; ?> hide"> 
    <table> 
     <tr> 
      <form id="custom-comments-form" action="" method="post"> 

       //form fields 

       <button class="uk-button" type="submit">Send</button> 
      </form> 
     </tr> 
    </table> 
    </div> 

} 

JQuery와 :

jQuery(function ($) { 
    $(document).ready(function(){ 

     $(".km-collapse-forms.expand-all").show();  

     $('.km-collapse-forms.expand-all').on('click',function(){ 

      // Expand/Collapse All 
      $(".km-collapse-forms.expand-all").addClass("hide"); 
      $(".km-collapse-forms.collapse-all").removeClass("hide"); 

      // Change text respond/hide form 
      $(".respond-to-messages.expand-form").addClass("hide"); 
      $(".respond-to-messages.collapse-form").removeClass("hide"); 

      $(".comment-respond-form").slideDown("slow"); 

     });  

     $('.km-collapse-forms.collapse-all').on('click',function(){ 

      $(".km-collapse-forms.collapse-all").addClass("hide"); 
      $(".km-collapse-forms.expand-all").removeClass("hide"); 

      $(".respond-to-messages.collapse-form").addClass("hide"); 
      $(".respond-to-messages.expand-form").removeClass("hide"); 

      $(".comment-respond-form").slideUp("slow"); 

     }); 



     // respond/hide form text :: single comment 
     // This is where I'm having trouble with 
     $('.respond-to-messages.expand-form').on('click',function(){ 

      $(this).next(".respond-to-messages.collapse-form").removeClass("hide"); 
      $(this).next(".respond-to-messages.expand-form").addClass("hide"); 

      $(this).next(".comment-respond-form").removeClass("hide"); 
      $(this).next(".comment-respond-form").slideDown("slow"); 

     }); 


     $('.respond-to-messages.collapse-form').on('click',function(){  
      $(this).next(".respond-to-messages.collapse-form, .comment-respond-form").addClass("hide"); 
      $(this).next(".respond-to-messages.expand-form").removeClass("hide"); 

      $(this).prev(".comment-respond-form").addClass("hide"); 
      $(this).next(".comment-respond-form").slideUp("slow"); 

     }); 



    }); 
}); 

것이 아니라 각 개인 Respond to comment/hide form 내가 그뿐만 아니라 일하고 싶습니다하지 않는 동안 같이 expand/collapse all 작동합니다.

도움을 주시면 감사하겠습니다.

Answer 1

코드가 약간 지저분했습니다. 나는 그것을 빨리 청소하려고 노력했으나 그것을 더 잘하기 위해 할 일이 많이있다. Javascript의 "우수 사례"를 살펴보십시오.

팁 : 불필요한 HTML 요소의

• 많은
• 사용 기능
• 캐시의 jQuery 셀렉터
• 는 자바 스크립트 디자인 패턴

에게 전문 솔루션을 고려 : jsFiddle

JS :

jQuery(function ($) { 
    $(document).ready(function() { 

     var $listElem = $('.accordion-elem'); 
     function showAll() { 
      $listElem.each(function() { 
      $(this).removeClass('hiddenElements'); 
      $(this).find('.respond-to-messages').text('Hide form'); 
      $(this).find('.comment-respond-form').slideDown("slow"); 
      }); 
     } 

     function hideAll() { 
      $listElem.each(function() { 
      $(this).addClass('hiddenElements'); 
      $(this).find('.respond-to-messages').text('Respond to message'); 
      $(this).find('.comment-respond-form').slideUp("slow"); 
      }); 
     } 

     $('.all-button').on('click',function() { 
       console.log("trigger"); 
      if ($(this).hasClass('expanded')) { 
       hideAll(); 
       $(this).removeClass('expanded'); 
       $(this).text('Expand All'); 
      } else { 
       showAll(); 
       $(this).addClass('expanded'); 
       $(this).text('Collapse All'); 
      } 
     }); 

     $('.respond-to-messages').on('click', function() { 
      var $targetLi = $(this).closest('li'); 
      if($targetLi.hasClass('hiddenElements')) { 
      //Show 
      $targetLi.removeClass('hiddenElements'); 
      $targetLi.find('.respond-to-messages').text('Hide form'); 
      $targetLi.find('.comment-respond-form').slideDown("slow"); 
      } else { 
      //hide 
      $targetLi.addClass('hiddenElements'); 
      $targetLi.find('.respond-to-messages').text('Respond to message'); 
      $targetLi.find('.comment-respond-form').slideUp("slow"); 
      } 
     }); 


    }); 
}); 

HTML :

<div class="buttons"> 
    <a class="all-button expanded" href="#">Collapse All</a>    
</div> 

<ul> 
<li class="accordion-elem"> Lorem ipsum<br /><br /> 
    <a class="respond-to-messages" href="#">Hide form</a> 
    <div id="comment-5" class="comment-respond-form"> 
<table> 
     <tr> 
      <form id="custom-comments-form" action="" method="post"> 
       <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea> 
       <button class="uk-button" type="submit">Send</button> 
      </form> 
     </tr> 
     </table></div> 
    </li> 

    <li class="accordion-elem"> Lorem ipsum<br /><br /> 
     <a class="respond-to-messages" href="#">Hide form</a> 
     <div id="comment-6" class="comment-respond-form"> 
     <table> 
     <tr> 
      <form id="custom-comments-form" action="" method="post"> 
       <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea> 
       <button class="uk-button" type="submit">Send</button> 
      </form> 
     </tr> 
     </table></div> 
    </li> 
    <li class="accordion-elem"> Lorem ipsum<br /><br /> 
     <a class="respond-to-messages" href="#">Hide form</a> 
     <div id="comment-7" class="comment-respond-form"> 
     <table> 
     <tr> 
      <form id="custom-comments-form" action="" method="post"> 
       <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea> 
       <button class="uk-button" type="submit">Send</button> 
      </form> 
     </tr> 
     </table></div> 
    </li> 
</ul>