2013-05-13 43 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/