我该如何压缩这个Jquery代码?

时间:2013-05-13 22:11:36

标签: javascript jquery

我一直在学习Jquery一段时间了,我创建了一个脚本,当我点击div(#click)时,另一个div(#slide)会向下滑动并显示内部的内容。下面是我为此编写的脚本,但我觉得它太重复了。必须有更好的方法来实现相同的结果,但代码要少得多。我用谷歌搜索但未能找到任何解决方案,任何人的想法?

$(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 -->

6 个答案:

答案 0 :(得分: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

答案 1 :(得分:2)

试试这个:

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

答案 2 :(得分:1)

给他们一个属性将他们绑在一起,例如:

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


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

你可以使用你想要的任何东西将它们真正联系在一起。通常,如果您使用链接,最好使用jsut,例如:

<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');
});

答案 3 :(得分:1)

在您单击的html元素中添加一个类,您可以使用数据属性来保存您的值

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

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

答案 4 :(得分:1)

您没有展示HTML,这对指导答案非常有帮助,但假设您的结构如下:

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

然后你可以做一些像

这样的事情
<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元素相对于彼此的放置方式而有所不同。

答案 5 :(得分: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/

相关问题