重構jQuery代碼

Question

第一個問題，所以要種;）

我試圖重構這一功能：

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

     //One 
     $('.flip').click(function(){ 
     var link = $(this); 
     $('.panel').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //Two 
    $('.flip2').click(function(){ 
     var link = $(this); 
     $('.panel2').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //Three 
    $('.flip3').click(function(){ 
     var link = $(this); 
     $('.panel3').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //Four 
    $('.flip4').click(function(){ 
     var link = $(this); 
     $('.panel4').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //Five 
    $('.flip5').click(function(){ 
     var link = $(this); 
     $('.panel5').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //six 
    $('.flip6').click(function(){ 
     var link = $(this); 
     $('.panel6').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //Seven 
    $('.flip7').click(function(){ 
     var link = $(this); 
     $('.panel7').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //Eight 
    $('.flip8').click(function(){ 
     var link = $(this); 
     $('.panel8').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 

    //Nine 
    $('.flip9').click(function(){ 
     var link = $(this); 
     $('.panel9').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 


    //Ten 
    $('.flip10').click(function(){ 
     var link = $(this); 
     $('.panel10').slideToggle('slow', function() { 
      if ($(this).is(":visible")) { 
       link.text('Close');     
      } else { 
       link.text('Read More');     
      }   
     });   
    }); 





    }); 

我希望它只是一個機能的研究可以做到這一點。我應該在哪裏轉彎？我應該閱讀什麼文章？我真的停留在這！

乾杯，

編輯：

這是HTML：

<!-- section six --> 
<h3 class="text-center">How to use promotional feather banners?</h3> 
Feather banners are a brilliant way to guide people around your business premises, or liven up a local event with some custom advertising. These flags are very quick to set up — use them to transform a space in minutes. 
<div class="panel6"> 

These branded flags can be used in a cluster or on their own — depends on the effect you want to create. A single large flag can make a good impression on people passing by on foot or in their cars, whereas a cluster of smaller or medium flags can make a nice walkway through a retail forecourt, or show people where to walk at a large event. All our flags come in a range of sizes and sets to suit different budgets — just speak to one of the team who can take you through all the different options. 

Businesses that need to grab people’s attention fast often opt for flag advertising — real estate agents, food retailers, and car dealerships being just some of our regular flag customers. <strong>Our flags help Aussie businesses really stand out against their competition.</strong> 

Our flag bases and poles are all sold separately — we will help you find the right flag bundle for your needs. We stock both hard ground and soft ground feather flag kits so that you are always prepared for any event or eventuality. See for yourself how easy they are to set up and install. 

<center><button class="trigger-btn trigger-1250" style="padding: 10px;">Enquire today for some great offers</button></center> 
<div class="text-center"><strong>Flag us down and speak to an expert on 1300 556 589</strong></div> 
&nbsp; 

</div> 

<p class="flip6">Read More</p> 


<hr /> 

<!-- section six end --> 

Answer 1

你可以做一個點擊事件，如果你把所有的翻蓋元素的同一類的，和通過某個屬性將每個面板綁定到正確的翻蓋。

例如，在給定的HTML：

<a class="flip" id="flip1 ">flip 1</a> 
<a class="flip" id="flip2">flip 2</a> 
<div class="panel panel1" data-id="flip1"></div> 
<div class="panel panel2" data-id="flip2"></div> 

它可能現在只能運行1個點擊事件到這次行動

$('.flip').click(function(){ 
    var link = $(this); 
    var id = $(this).attr("id"); 
    // use the attribute data-id to find the element. 
    $('.panel[data-id='+ id +']').slideToggle('slow', function() { 
     if ($(this).is(":visible")) { 
      link.text('Close');     
     } else { 
      link.text('Read More');     
     }   
    });   
});