jquery显示和隐藏元素

Question

我想知道是否有一种更简单的方式来编写我在下面做的事情。基本上整个网站的想法是，你点击一个链接...它会呈现给你两个单选按钮，选择一个会给你另一个链接点击会给你一个表....同样的事情与另一个单选按钮。

  <script type="text/javascript"> 
      $('.topreports').toggleClass('reportshovered'); 
      $('#clickapp').click(function() { 
       $('#pendingappsasgn').hide(); 
       $('#closedappsasgn').hide(); 
       $('#pendingapptableasgn').hide(); 
       $('#adminpendingasgn').hide(); 
       $('#closedapptableasgn').hide(); 
       $('#closedpendingasgn').hide(); 
       $('#comp1').hide(); 
       $('#comp').slideDown('200'); 
      }); 

      $('#clickapp').click(function() { 
       $('#comp1').hide(); 
       $('#closedapps').hide(); 
       $('#comp').slideDown('200'); 

       //pending radio buttons 

       if ($('#app1').click(function() { 
        $('#closedapps').hide(); 
        $('#closedpending').hide(); 
        $('#closedapptable').hide(); 
        $('#pendingapps').slideDown('200'); 

       })); 

       //closed radio buttons 

       if ($('#app2').click(function() { 
        $('#pendingapps').hide(); 
        $('#pendingapptable').hide(); 
        $('#adminpending').hide(); 
        $('#closedapps').slideDown('200'); 


       })); 

       //2 pending links 

       if ($('#reporttemp').click(function() { 
        $('#adminpending').hide(); 
        $('#pendingapptable').slideDown('200'); 

       })); 

       if ($('#reportadmin').click(function(){ 
         $('#pendingapptable').hide(); 
         $('#adminpending').slideDown('200'); 
       })); 

       //Closed Approval Links 

       if ($('#closedtemps').click(function() { 
         $('#closedpending').hide(); 
         $('#closedapptable').slideDown('200'); 

       })); 

       if ($('#closedadmin').click(function() { 
        $('#closedapptable').hide(); 
        $('#closedpending').slideDown('200'); 

       })); 

      }); 

      //Assigned Approval list 

      $('#clickassigned').click(function() { 
       $("input:radio").removeAttr("checked"); 
       $('#comp').hide(); 
       $('#pendingapps').hide(); 
       $('#closedapps').hide(); 
       $('#pendingapptable').hide(); 
       $('#adminpending').hide(); 
       $('#closedapptable').hide(); 
       $('#closedpending').hide(); 
       $('#comp1').slideDown('200'); 


      }); 

      //assigned Approval Pending Radio 
      if ($('#asgnpending').click(function() { 
        $('#closedappsasgn').hide(); 
        $('#closedpendingasgn').hide(); 
        $('#closedapptableasgn').hide(); 
        $('#pendingasgn').slideDown('200'); 

      })); 

      //Assigned Approval closed radio buttons 

      if ($('#asgnclosed').click(function() { 
        $('#pendingasgn').hide(); 
        $('#pendingapptableasgn').hide(); 
        $('#adminpendingasgn').hide(); 
        $('#closedappsasgn').slideDown('200'); 


      })); 
      if ($('#reporttempasgn').click(function() { 
        $('#adminpendingasgn').hide(); 
        $('#pendingapptableasgn').slideDown('200'); 

      })); 

      if ($('#reportadminasgn').click(function() { 
        $('#pendingapptableasgn').hide(); 
        $('#adminpendingasgn').slideDown('200'); 
      })); 

      //Closed Approval Links 

      if ($('#closedtempsasgn').click(function() { 
        $('#closedpendingasgn').hide(); 
        $('#closedapptableasgn').slideDown('200'); 

      })); 

      if ($('#closedadminasgn').click(function() { 
        $('#closedapptableasgn').hide(); 
        $('#closedpendingasgn').slideDown('200'); 

      })); 

Answer 1

您可以为相似的元素指定一个类，并用类选择器隐藏它们。

$(".classSelect").hide();