2013-05-13 42 views
1

我一直在學習jquery一段時間,並且我創建了一個腳本,當我點擊一個div(#click)時,另一個div(#slide)將滑下並顯示內容。下面是我爲我寫的這個腳本,但我覺得它太重複了。必須有更好的方式來達到相同的結果,但代碼少得多。我GOOGLE了,但一直沒能找到任何解決方案,任何想法的人?如何壓縮此Jquery代碼?

$(document).ready(function(){ 
    $("#click").click(function(){ 
     $("#slide").slideToggle("slow"); 
    }); 
    $("#click2").click(function(){ 
     $("#slide2").slideToggle("slow"); 
    }); 
    $("#click3").click(function(){ 
     $("#slide3").slideToggle("slow"); 
    }); 
    $("#click4").click(function(){ 
     $("#slide4").slideToggle("slow"); 
    }); 
    $("#click5").click(function(){ 
     $("#slide5").slideToggle("slow"); 
    }); 
    $("#click6").click(function(){ 
     $("#slide6").slideToggle("slow"); 
    }); 
    $("#click7").click(function(){ 
     $("#slide").slideToggle("slow"); 
    }); 
    $("#click8").click(function(){ 
     $("#slide8").slideToggle("slow"); 
    }); 
    $("#click9").click(function(){ 
     $("#slide9").slideToggle("slow"); 
    }); 
    $("#click10").click(function(){ 
     $("#slide10").slideToggle("slow"); 
    }); 
    $("#click11").click(function(){ 
     $("#slide11").slideToggle("slow"); 
    }); 
    $("#click12").click(function(){ 
     $("#slide12").slideToggle("slow"); 
    }); 
    $("#click13").click(function(){ 
     $("#slide13").slideToggle("slow"); 
    }); 
    $("#click14").click(function(){ 
     $("#slide14").slideToggle("slow"); 
    }); 
    $("#click15").click(function(){ 
     $("#slide15").slideToggle("slow"); 
    }); 
    $("#click16").click(function(){ 
     $("#slide16").slideToggle("slow"); 
    }); 
    $("#click17").click(function(){ 
     $("#slide17").slideToggle("slow"); 
    }); 
    $("#click18").click(function(){ 
     $("#slide18").slideToggle("slow"); 
    }); 
    $("#click19").click(function(){ 
     $("#slide19").slideToggle("slow"); 
    }); 
}); 

我知道這是醜陋的,但我唯一的線索是使用關鍵字(this),但我不知道如何實現它。所以幫助將不勝感激。

這裏是HTML:

<div id="main"> 
     <div class="content"> 
      <img src="images/training.jpg" alt="banner" class="pic"/> 
      <h3>10 Hour Construction</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This <span class="theme">10 Hour</span> program is intended to provide instruction on a variety of construction safety and 
      health standards to entry-level participants. Your employees will receive an acknowledgement of 
      completion &amp; wallet card upon completion of the training.</p> 
     </div><!-- content div --> 

     <div id="click"> 
      <p>Show More/Show Less</p> 
     </div> 

     <div id="slide"> 
      <h4>Mandatory Topics 7 Hours:</h4> 
      <ul class="services"> 
       <li>Intro to OSHA- 2 Hours</li> 
       <li>Focus Four - 4 Hours: Fall Protection- Minimum 1hr. 15 Minutes, Electrical-Minimum 30 Minutes, Struck by 
        Minimum 30 Minutes &amp; Caught in or Between Minimum 30 Minutes</li> 
       <li>Personal Protective &amp; Life Saving Equipment - Minimum 30 Minutes</li> 
       <li>Health Hazards in Construction - Minimum 30 Minutes</li> 
       <li>Stairways &amp; Ladders - 30 minutes</li> 
      </ul> 

      <h4>Elective Topics 2 Hours:</h4> 
      <ul class="services"> 
       <li>Material Handling, Storage, Use and Disposal, Subpart H</li> 
       <li>Tools- Hand and Power, Subpart I</li> 
       <li>Scaffold, Subpart L</li> 
       <li>Cranes, Derricks, Hoists, Elevators, &amp; Conveyors, Subpart N</li> 
       <li>Excavation, Subpart P</li> 
      </ul> 

      <h4>Optional Topics 1 Hour:</h4> 
      <ul class="services"> 
       <li>Subpart H: Materials Handling, Storage, Use and Disposal</li> 
       <li>Subpart N: Cranes, Derricks, Hoists, Elevators, and Conveyors</li> 
       <li>Subpart O: Motor Vehicles, Mechanized Equipment; Construction Equipment</li> 
       <li>Subpart L: Scaffolding</li> 
       <li>Subpart P: Excavations</li> 
       <li>Subpart X: Stairways and Ladders</li> 
       <li>Subpart D: Occupational Health &amp; Environmental Controls (Emphasis on Hazard Communication)</li> 
       <li>Subpart E: Personal Protective Equipment</li> 
       <li>Subpart F: Fire Protection and Prevention</li> 
       <li>Subpart G: Signs, Signals, and Barricades</li> 
       <li>Subpart I: Tools – Hand and Power</li> 
       <li>Subpart J: Welding and Cutting</li> 
       <li>Subpart Q: Concrete and Masonry Construction</li> 
       <li>Subpart R: Steel Erection</li> 
       <li>Subpart S: Underground Construction, Caissons, Cofferdams &amp; Compressed Air</li> 
       <li>Subpart T: Demolition</li> 
       <li>Subpart U: Blasting and Use of Explosives</li> 
       <li>Subpart V: Power Transmission and Distribution</li> 
       <li>Subpart W: Rollover Protective Structures</li> 
       <li>Subpart Z: Toxic and Hazardous Substances</li> 
       <li>1910 Confined Spaces</li> 
       <li>29 CFR 1904: Recordkeeping, OSHA Forms 300, 300A &amp; 301</li> 
      </ul> 
     </div><!-- slide div --> 

     <div class="content"> 
      <h3>10 Hour General Industry</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This <span class="theme">10 Hour</span> program is intended to provide instruction on a variety of general industry safety and 
      health standards to entry-level participants. Your employees will receive an acknowledgement of 
      completion &amp; wallet card upon completion of the training.</p> 
     </div> 

     <div id="click2"> 
      <p>Show More/Show Less</p> 
     </div> 

     <div id="slide2"> 
      <h4>Mandatory Topics 7 Hours:</h4> 
      <ul class="services"> 
       <li>Intro to OSHA- 2 Hours</li> 
       <li>Walking and Working Surfaces, including fall protection – 1 Hour</li> 
       <li>Exit Routes, Emergency Action Plans, Fire Prevention Plans, and Fire Protection – 1 Hour</li> 
       <li>Electrical – 1 Hour</li> 
       <li>Personal Protective Equipment – 1 Hour</li> 
       <li>Hazard Communication – 1 Hour</li> 
      </ul> 

      <h4>Elective Topics 2 Hours:</h4> 
      <ul class="services"> 
       <li>Hazardous Materials Tools- Hand and Power, Subpart I</li> 
       <li>Materials Handling</li> 
       <li>Machine Guarding</li> 
       <li>Introduction to Industrial Hygiene</li> 
       <li>Bloodborne Pathogens</li> 
       <li>Ergonomics</li> 
       <li>Safety &amp; Health Program</li> 
       <li>Fall Protection</li> 
      </ul> 
     </div><!-- slide div --> 

     <div class="content"> 
      <h3>30 Hour Construction</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This <span class="theme">30 Hour</span> program is intended to provide instruction on a variety of construction safety and health 
      standards to entry-level and intermediate-level participants. Your employees will receive an 
      acknowledgement of completion &amp; wallet card upon completion of the training.</p> 
     </div><!--content div --> 

     <div id="click3"> 
      <p>Show More/Show Less</p> 
     </div>   

     <div id="slide3"> 
      <h4>Mandatory Topics 15 Hours:</h4> 
      <ul class="services"> 
       <li>Intro to OSHA - 2 Hours</li> 
       <li>Managing Safety &amp; Health - 2 Hours</li> 
       <li>Focus Four- 6 Hours: Fall Protection - Minimum 1 Hour 15 Minutes, Electrical-Minimum 30 Minutes, Struck 
        by Minimum 30 Minutes &amp; Caught in or Between Minimum 30 Minutes</li> 
       <li>Personal Protective &amp; Life Saving Equipment - 2 Hours</li> 
       <li>Health Hazards in Construction - 2 Hours</li> 
       <li>Stairways &amp; Ladders - 1 Hour</li> 
      </ul> 

      <h4>Elective Topics 12 Hours:</h4> 
      <ul class="services"> 
       <li>STD 3-1.1 "Clarification of Citation Policy Regarding 29 CFR 1926.20, 29 CFR 1926.21 and Related General 
        Safety and Health Provisions"; Safety Programs</li> 
       <li>Fire Protection and Prevention, Subpart F</li> 
       <li>Material Handling, Storage, Use and Disposal, Subpart H</li> 
       <li>Tools- Hand and Power, Subpart I</li> 
       <li>Welding and Cutting, Subpart J</li> 
       <li>Scaffold, Subpart L</li> 
       <li>Cranes, Derricks, Hoists, Elevators, and Conveyers, Subpart N</li> 
       <li>Motor Vehicles, Mechanized Equipment and Marine Operations; Rollover Protective Structures and Overhead</li> 
       <li>Protection; and Signs, Signals and Barricades, Subpart O, W and G</li> 
       <li>Excavations, Subpart P</li> 
       <li>Concrete and Masonry Construction, Subpart Q</li> 
       <li>Steel Erection, Subpart R</li> 
       <li>Confined Space Entry</li> 
       <li>Power Industrial Vehicles</li> 
      </ul> 

      <h4>Optional Topics 3 Hours:</h4> 
      <ul class="services"> 
       <li>Subpart D: Occupational Health &amp; Environmental Controls (Emphasis on Hazard Communication)</li> 
       <li>Subpart E: Personal Protective Equipment</li> 
       <li>Subpart F: Fire Protection and Prevention</li> 
       <li>Subpart G: Signs, Signals, and Barricades</li> 
       <li>Subpart I: Tools – Hand and Power</li> 
       <li>Subpart J: Welding and Cutting</li> 
       <li>Subpart Q: Concrete and Masonry Construction</li> 
       <li>Subpart R: Steel Erection</li> 
       <li>Subpart S: Underground Construction, Caissons, Cofferdams and Compressed Air</li> 
       <li>Subpart T: Demolition</li> 
       <li>Subpart U: Blasting and Use of Explosives</li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h3>30 Hour General Industry</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This <span class="theme">30 Hour</span> program is intended to provide instruction on a variety of general industry safety and health 
      standards to entry-level and intermediate-level participants. Your employees will receive an 
      acknowledgement of completion &amp; wallet card upon completion of the training.</p> 
     </div> 

     <div id="click4"> 
      <p>Show More/Show Less</p> 
     </div> 

     <div id="slide4"> 
      <h4>Mandatory Topics 13 Hours:</h4> 
      <ul class="services"> 
       <li>Intro to OSHA - 2 Hours</li> 
       <li>Managing Safety &amp; Health - 2 Hours</li> 
       <li>Walking and Working Surfaces, including Fall Protection - 1 Hour</li> 
       <li>Exit Routes, Emergency Action Plans, Fire Prevention Plans, and Fire Protection - 2 Hours</li> 
       <li>Electrical - 2 Hours</li> 
       <li>Personal Protective Equipment (PPE) - 1 Hour</li> 
       <li>Materials Handling - 2 Hours</li> 
       <li>Hazard Communication -1 Hour</li> 
      </ul> 

      <h4>Elective Topics 10 Hours:</h4> 
      <ul class="services"> 
       <li>Hazardous Materials (Flammable and Combustible Liquids, Spray Finishing, Compressed Gases, Dipping and Coating Operations)</li> 
       <li>Permit-Required Confined Spaces</li> 
       <li>Lockout/Tagout</li> 
       <li>Machine Guarding</li> 
       <li>Welding, Cutting, and Brazing</li> 
       <li>Introduction to Industrial Hygiene</li> 
       <li>Bloodborne Pathogens</li> 
       <li>Ergonomics</li> 
       <li>Fall Protection</li> 
       <li>Safety and Health Programs</li> 
       <li>Powered Industrial Vehicles</li> 
      </ul> 

      <h4>Optional Topics 7 Hours:</h4> 
      <ul class="services"> 
       <li>Teach other general industry hazards or policies and/or expand on the mandatoryor elective topics.</li> 
       <li>The minimum length of any topic is one-half hour.</li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h3>Aerial Boom Lift/Scissor Lift Operator Safety Course</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This program consists of classroom instruction and hands-on performance testing. The hands-on 
      training will be conducted at your location on your equipment. Your employees will receive an 
      acknowledgement of completion &amp; wallet card upon completion of the training. Listed below are the 
      topics presented.</p> 
     </div> 

     <div id="click5"> 
      <p>Show More/Show Less</p> 
     </div> 

     <div id="slide5"> 
      <h4>Classroom Instruction:</h4> 
      <ul class="services"> 
       <li>Manufacturer Safety &amp; Operation Video Presentation</li> 
       <li>Manufacturer Safety &amp; Operators Manual</li> 
       <li>OSHA/ Manufacturer Regulations - Operator’s Responsibilities &amp; User release/ indemnity</li> 
       <li>Nomenclature - Safety Placards &amp; Component Identification</li> 
       <li>Pre-operation Inspection - Hydraulics (all hydraulic components must be retracted to get accurate reading of hydraulic level)</li> 
       <li>Operators Responsibilities</li> 
       <li>Work Site Assessment- Identification of Site Hazards</li> 
       <li>Site Conditions- Terrain, Wind, Existing Hazards</li> 
       <li>Function Test- Ground Controls versus Platform Controls</li> 
       <li>Safe Operation of Equipment - 4 Steps to Positioning - Ramp, Direction of Travel- Directional Arrows, Emergency Shutdown</li> 
       <li>Equipment Stability - Center of Gravity, Personnel &amp; Load Capacity</li> 
       <li>Egress to Platform - 3 points of contact, Body position for exiting</li> 
       <li>Transfer to Structures from the Equipment</li> 
       <li>Electrical Hazards - Minimum Approach Distance</li> 
       <li>Fall Protection - Body Harness &amp; Tie Off Points</li> 
       <li>Proper Shutdown of the Equipment</li> 
       <li>Repair &amp; Maintenance - Authorized Personnel &amp; Annual Inspection</li> 
       <li>Passenger Training Requirements &amp; Communication</li> 
       <li>Load Capacity of the Personnel Platform</li> 
       <li>Written Exam</li> 
      </ul> 

      <h4>Hands On Instruction:</h4> 
      <ul class="services"> 
       <li>Pre-operation Inspection of the Equipment</li> 
       <li>Work Site Assessment</li> 
       <li>Function &amp; Controls Testing</li> 
       <li>Hands on Performance Testing</li> 
       <li>Steps to Shut Down the Equipment</li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h3>Heavy Equipment Operator - Backhoe/Front-End Loader, Mini Excavator, Skid Steer Loader, Dozer, etc..</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; According to the manufacturer, all employees who operate heavy equipment must be trained and 
      qualified by the company. In this course, we will train the student in the skills needed to safely 
      operate heavy equipment. Hands-on operation will also be performed on heavy equipment provided 
      by your company. Your employees will receive an acknowledgement of completion &amp; wallet card 
      upon completion of the training.</p> 
     </div> 

     <div id="click6"> 
      <p>Show More/Show Less</p> 
     </div>  

     <div id="slide6"> 
      <h4>Heavy Equipment-related topics:</h4> 
      <ul class="services"> 
       <li>OSHA/ Manufacturer Regulations Operating instructions, warnings, and precautions for heavy equipment the operator will be authorized 
        to operate</li> 
       <li>Pre operation Inspection</li> 
       <li>Heavy equipment controls and instrumentation: where they are located, what they do, and how they work</li> 
       <li>Steering and maneuvering</li> 
       <li>Visibility (including restrictions due to loading)</li> 
       <li>Vehicle capacity/ stability</li> 
       <li>Any vehicle inspection and maintenance that the operator will be required to perform</li> 
       <li>Refueling and/or charging and recharging of batteries</li> 
       <li>Any other operating instructions, warnings, or precautions listed in the operator’s manual for the types of vehicle that the employee is being trained to operate</li> 
      </ul> 

      <h4>Workplace-related topics:</h4> 
      <ul class="services"> 
       <li>Surface conditions where the heavy equipment will be operated</li> 
       <li>Composition of loads to be carried and load stability</li> 
       <li>Pedestrian traffic in areas where the equipment will be operated</li> 
       <li>Hazardous (classified) locations where the equipment will be operated</li> 
       <li>Ramps and other sloped surfaces that could affect the equipment’s stability</li> 
       <li>Closed environments and other areas where insufficient ventilation or poor vehicle maintenance could cause a buildup of carbon monoxide or diesel exhaust.</li> 
       <li>Other unique or potentially hazardous environmental conditions in the workplace that could affect safe operation</li> 
       <li>Hands-on training conducted on your equipment at your facility</li> 
       <li>We will finish up with a written exam &amp; open discussion.</li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h3>Rigging &amp; Signal Communication Safety Training</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This program consists of classroom instruction and hands-on performance 
      testing. Power point Presentation &amp; hands on instruction will be used to discuss 
      the general rigging procedures &amp; OSHA guidelines. The hands-on training will be 
      conducted at your location using your equipment.</p> 
     </div> 

     <div id="click7"> 
      <p>Show More/Show Less</p> 
     </div>  

     <div id="slide7"> 
      <h4>Material Handling/ Rigging:</h4> 
      <ul class="services"> 
       <li>OSHA Subpart H Regulations Material Handling, Storage, Use, and Disposal</li> 
       <li>Designation of the Qualified Rigger - OSHA Subpart CC Training Requirements</li> 
       <li>Inspection &amp; Maintenance of the Rigging Equipment</li> 
       <li>Work Site Assessment - Identification of Site Hazards</li> 
       <li>Determination of Load Weight &amp; Load Capacity of the Rigging Equipment</li> 
       <li>Sling Angle Tensions - 90, 60, 45 and 30 Degree Angles</li> 
       <li>Load Angle Factor Formula</li> 
       <li>Rigger’s Capacity Card Review in Detail.</li> 
       <li>Establishing Swing Zone &amp; Radius Clearance</li> 
       <li>Written Exam</li> 
      </ul> 

      <h4>Hand Signals/Communication:</h4> 
      <ul class="services"> 
       <li>OSHA Crane Subpart CC Hand Signal Regulations</li> 
       <li>Designation of the qualified Signal Person - Training Requirements</li> 
       <li>Rigger’s Hand Signal Card Review in Detail.</li> 
       <li>Establishing Communication- Hand Signals &amp; Radio Communication with Crane Operators &amp; Contractors on Site.</li> 
       <li>Written Exam</li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h3>Industrial Lift Truck/ Rough Terrain Forklift Operator Safety</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; According to <span class="theme">OSHA (29 CFR 1910.178)</span>, all employees who operate a Powered Industrial Truck/
      Rough Terrain Forklift must be trained and authorized by the company prior to operation. In this 
      course, we will train the student in the skills needed to safely operate a standard, rough terrain, gas- 
      propane and/or electric Forklift Truck. Hands-on practice using an actual Forklift through an 
      obstacle course is the highlight of this class. Your employees will receive an acknowledgement of 
      completion &amp; wallet card upon completion of the training.</p> 
     </div> 

     <div id="click8"> 
      <p>Show More/Show Less</p> 
     </div>  

     <div id="slide8"> 
      <h4>Truck-related topics:</h4> 
      <ul class="services"> 
       <li>OSHA/ Manufacturer Regulations 
       <li>Operating instructions, warnings, and precautions for the types of truck the operator will be authorized to operate</li> 
       <li>Differences between the truck and the automobile</li> 
       <li>Truck controls and instrumentation: where they are located, what they do, and how they work</li> 
       <li>Engine or motor operation</li> 
       <li>Steering and maneuvering</li> 
       <li>Visibility (including restrictions due to loading)</li> 
       <li>Fork and attachment adaptation, operation, and use limitations</li> 
       <li>Vehicle capacity</li> 
       <li>Vehicle stability</li> 
       <li>Any vehicle inspection and maintenance that the operator will be required to perform</li> 
       <li>Refueling and/or charging and recharging of batteries</li> 
       <li>Operating limitations</li> 
       <li>Any other operating instructions, warnings, or precautions listed in the operator’s manual for the types of 
       vehicle that the employee is being trained to operate</li> 
      </ul> 

      <h4>Workplace-related topics:</h4> 
      <ul class="services"> 
       <li>Surface conditions where the vehicle will be operated</li> 
       <li>Composition of loads to be carried and load stability</li> 
       <li>Load manipulation, stacking, and unstacking</li> 
       <li>Pedestrian traffic in areas where the vehicle will be operated</li> 
       <li>Narrow aisles and other restricted places where the vehicle will be operated</li> 
       <li>Hazardous (classified) locations where the vehicle will be operated</li> 
       <li>Ramps and other sloped surfaces that could affect the vehicle’s stability</li> 
       <li>Closed environments and other areas where insufficient ventilation or poor vehicle maintenance could cause 
       a buildup of carbon monoxide or diesel exhaust.</li> 
       <li>Other unique or potentially hazardous environmental conditions in the workplace that could affect safe operation</li> 
       <li>Hands-on portion done on your machine at your facility</li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h3>Scaffolding User &amp; Competency Safety</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The purpose of this course is to provide the scaffold erector, users and scaffold inspector the 
      knowledge of the OSHA regulations, safety guidelines, procedures and best work practices needed to 
      recognize and eliminate hazards in the field. This course supports the designation of the competent 
      person as required by OSHA. Your employees will receive an acknowledgement of completion &amp; 
      wallet card upon completion of the training.</p> 
     </div> 

     <div id="click9"> 
      <p>Show More/Show Less</p> 
     </div>  

     <div id="slide9"> 
      <h4>Classroom Instruction:</h4> 
      <ul class="services"> 
       <li>OSHA Subpart L Scaffold Safety Regulations</li> 
       <li>Safety Training Requirements for the Users, Erector &amp; Competent Person</li> 
       <li>Competent Person’s Role &amp; Responsibilities</li> 
       <li>Scaffold Inspection Process</li> 
       <li>Multi User/Indemnification Process</li> 
       <li>Applications and Components Associated with Frame, System, Suspended, Tube &amp; Clamp and 
       Mobile Scaffolding</li> 
       <li>Fall Protection/ Guardrail Guidelines</li> 
       <li>Requirements for Ties and Affect of Wind Force on Scaffolds</li> 
       <li>Scaffold Planks &amp; Platform Requirements</li> 
       <li>Scaffold Egress</li> 
       <li>Accidents &amp; Fatal statistics</li> 
       <li>Written Exam</li> 
      </ul> 

      <h4>Hands on Instruction:</h4> 
      <ul class="services"> 
       <li>Erection &amp; inspection of scaffolding provided by the client if available</li> 
       <li>We will finish with an open discussion</li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h3>Fall Protection Guidelines &amp; Equipment User</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This fall protection class uses real-world examples to enhance the understanding of diverse and 
      complex requirements under the very stringent <span class="theme">OSHA fall protection</span> standard. A presentation of 
      photographs and videos of actual job-sites and hands on practice helps students to see the benefits 
      and limitations of many fall protection systems and how they can be used to work safely. Your 
      employees will receive an acknowledgement of completion &amp; wallet card upon completion of the 
      training.</p> 
     </div> 

     <div id="click10"> 
      <p>Show More/Show Less</p> 
     </div>  

     <div id="slide10"> 
      <h4>Required Topics:</h4> 
      <ul class="services"> 
       <li>Regulatory requirements under (29 CFR 1926.500)</li> 
       <li>Principles of fall protection and hazards</li> 
       <li>Fall arrest systems and their components</li> 
      </ul> 

      <h4>Topics Presented:</h4> 
      <ul class="services"> 
       <li>Subpart M Regulations</li> 
       <li>Accidents &amp; Fatal Statistics</li> 
       Fall protection systems, which include guardrail systems, safety nets, personal fall arrest 
       systems, safety monitoring systems, controlled access zones, hole covers, and warning lines. 
       <li>Each system will be discussed in detail.</li> 
       <li>Approved Engineered/Manufactured Systems and Components</li> 
       <li>Approved Anchorage points</li> 
       <li>Approved connectors</li> 
       <li>Fall distance from anchor point to lower level</li> 
       <li>Written Exam</li> 
       <li>We will finish with an open discussion</li> 
      </ul> 

      <h4>Fall Protection Devices Hands On:</h4> 
      <ul class="services"> 
       <li>Full body harness &amp; lanyard- We will fit and inspect the body harness</li> 
       <li>Anchor connectors- cross arm strap &amp; beam clamp</li> 
      </ul> 
     </div>     


     <div class="content"> 
      <h3>Fire Protection &amp; Extinguisher Use</h3> 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The purpose of this class is to identify potential fire hazards at the work place, fire protection 
      methods to include storage of flammable/combustible materials and fire protection planning. A 
      presentation of photographs of actual job-sites and hands on practice helps students to identify 
      potential fire exposure at the work place. Your employees will receive an acknowledgement of 
      completion &amp; wallet card upon completion of the training.</p> 
     </div> 

     <div id="click11"> 
      <p>Show More/Show Less</p> 
     </div>  

     <div id="slide11"> 
      <h4>Required Topics:</h4> 
      <ul class="services"> 
       <li>Regulatory requirements under (29 CFR 1926.150) OSHA Subpart F</li> 
       <li>Fire Elements &amp; Hazards</li> 
       <li>The fire triangle - Oxygen, Fuel &amp; Heat</li> 
       <li>Identify different classes of fires - Type A, B, C, D, K, Carbon Dioxide, Halogen, etc.</li> 
      </ul> 
     </div> 


     </div>         
    </div> <!--main div --> 
+1

應該在代碼審查發佈 - http://codereview.stackexchange.com/ – lifetimes 2013-05-13 22:12:27

+2

你能否告訴我們你的HTML的一部分?如果它們在DOM中有一定的關係,你可能會把它放到一行 – Kenneth 2013-05-13 22:14:48

+1

$(「#click7」)。click(function(){$(「#slide」)。slideToggle(「slow」);我假設這是一個錯字??或者數字並不總是匹配? – jamil 2013-05-13 22:15:55

回答

5

您可以嘗試通過通配符選擇:

$(document).ready(function(){ 
    $("[id^=click]").each(function(_, value) { 
     $(value).click(function(){ 
      var myId = $(this).attr('id').replace('click',''); 
      $("#slide"+myId).slideToggle("slow"); 
     }); 
    }); 
}); 

檢查demo fiddle

注:這將讓他們用的ID開始click所有元素,不僅從'click'通過'click19'。我的意思是,clickANYTHING也將切換#slideANYTHING

+0

這工作完美!謝謝 – nastyn8 2013-05-13 22:27:10

+0

雖然這實際上工作。我的建議是不引入一堆不必要的遞增ID,如果你只需要他們的這種切換行爲。更「jQuery」的做法是簡單地爲每個「click」元素使用一個通用類,爲「slide」元素使用另一個通用類,並根據DOM中的位置將相關元素關聯在一起。 – 2013-05-13 22:32:43

+0

是最好的答案,因爲它可以在不改變任何內容的情況下運行,您可以稍後添加點擊和幻燈片 – jamil 2013-05-13 22:32:59

1

給他們的屬性來綁在一起,它們例如:

$('.click').click(function() { 
    $($(this).attr('data-toggle-target')).slideToggle('slow'); 
}); 


<div class="click" data-toggle-target="#click12">I trigger a slide toggle</div> 

你可以使用你想真正綁在一起什麼。通常,如果您使用的是其最好的鏈接到僅僅指剛使用散列參考,如:

<a class="click" href="#the-target">I trigger a slide toggle</a> 

這樣,如果JS心不是使它跳轉到潛水你們會有反覆。如果它是你得到的切換 - 但如果你這樣做,你需要阻止默認:

$('a.click').click(function (e) { 
    e.preventDefault(); 
    $($(this).attr('href')).slideToggle('slow'); 
}); 
2

試試這個:

$("[id^='click']").click(function() { 
     $("#"+$(this).attr("id").replace("click", "slide")).slideToggle("slow"); 
    }); 
1

添加一個類的HTML元素,你點擊,你可以使用數據屬性來保存你的價值

<div class="clickme" data-something="1"></div> 

$(".clickme").click(function(){  
     var targetNum = (this).data("something"); 
     var targetId = "#slide" + targetNum; 
     $(targetId).slideToggle("slow");  
}); 
1

您還沒有表現出你的HTML這將大大幫助引導一個答案,但假設你有一個像這樣的結構:

<div id="click"></div> 
<div id="slide"></div> 
<div id="click2"></div> 
<div id="slide2"></div> 
etc. 

然後,你可以改爲d Ø像

<div class="click"></div> 
<div class="slide"></div> 
<div class="click"></div> 
<div class="slide"></div> 
etc. 

寫你的jQuery像

$(".click").click(function() { 
    $(this).next(".slide").slideToggle("slow"); 
} 

使用類而不是ID的應該是你的一般方法的方法。唯一的變量就是我在next(".slide")列出的地方使用什麼,因爲這可能會因HTML元素相對於另一個元素的位置而有所不同。

0

這工作,但我認爲有可能是一個更好的解決方案仍然

for (i= 0; i < 12; i++){ 
    var x = (i !== 0) ? + i : '' ; 

    $("#click" + x).data('slide', x).on('click', function(){ 
     var slide = $(this).data('slide'); 
     $("#slide" + slide).slideToggle("slow"); 
    }); 
}; 

http://jsfiddle.net/x9eCM/1/