如何简化这个臃肿的jQuery

时间：2018-03-05 07:26:10

标签： jquery

我是一个jQuery新手。我有我想要的功能，但我确信我的jQuery代码可以简化很多 - 有很多重复。

例如，每次点击产生几乎完全相同的结果 - 隐藏7个div，并显示1.我假设有一种方法可以立即切换所有div。

请指出我如何简化jQuery的正确方向。

感谢。页面的在线版本is here。

body {background-image: url(images/bg-page.jpg); background-size: cover; repeat: no-repeat;}
#selector {list-style: none; max-width: 1322px; margin: 0 auto; padding-left: 0; -webkit-padding-start: 0; margin-bottom: 0;}
#selector li {display: inline-block; width: 11.625%; margin-right: 0.75%; margin-top: 1%; background-color: #012F60; height: 70px; display: inline-table; vertical-align: top}
#selector li:last-child {margin-right: 0%}
#selector li#job.active {background-color: #93CB32;}
#selector li#help.active {background-color: #EC832A;}
#selector li#ndis.active {background-color: blue;}
#selector li#training.active {background-color: purple;}
#selector li#injured.active {background-color: orange;}
#selector li#refer.active {background-color: yellow;}
#selector li#psych.active {background-color: aqua;}
#selector li#employer.active {background-color: black;}
#selector li a {color: white; text-align: center; vertical-align: middle; display: table-cell; text-decoration: none;}
#selection {max-width: 1322px; margin: 0 auto; margin-top: 0;}
#selection div {padding: 1em 0;}
#selection h2 {margin-top: 0;}
#div-job, #div-help, #div-ndis, #div-training, #div-injured, #div-refer, #div-psych, #div-employer {display: none; text-align: center; color: white;}
#div-job {background-color: #93CB32;}
#div-help {background-color: #EC832A;}
#div-ndis {background-color: blue;}
#div-training {background-color: purple;}
#div-injured {background-color: orange;}
#div-refer {background-color: yellow;}
#div-psych {background-color: aqua;}
#div-employer {background-color: black;}

<div id="page">

    <ul id="selector">
        <li id="job" class="active"><a href="#">I want to find a job</a></li>
        <li id="help"><a href="#">I need help at work</a></li>
        <li id="ndis"><a href="#">NDIS</a></li>
        <li id="training"><a href="#">I need training</a></li>
        <li id="injured"><a href="#">I've been injured at work</a></li>
        <li id="refer"><a href="#">I want to refer</a></li>
        <li id="psych"><a href="#">Psych service</a></li>
        <li id="employer"><a href="#">I'm an employer</a></li>
    </ul>
    <div id="selection">
        <div id="div-job">
            <h2>Looking for a job?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>DES for individuals</option>
                <option>DES for youth</option>
                <option>NDIS - individual employment support</option>
                <option>NDIS - youth</option>
                <option>PHaMs</option>
                <option>DES for employers (recruitment)</option>
            </select>
        </div>
        <div id="div-help">
            <h2>Looking for help?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>NDIS - youth</option>
                <option>Psych services - EAP - for individual</option>
                <option>Psych services for H@W - individual</option>
                <option>Psych services for H@W - corporate</option>
                <option>Allied Health Physical services for H@W</option>
                <option>Allied Health Physical services for individuals</option>
                <option>WR for individuals</option>
                <option>Psych services - Workplace rehab - Individual</option>
                <option>NPA</option>
            </select>
        </div>
        <div id="div-ndis">
            <h2>National Disability Insurance Scheme (NDIS)?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>DES for employers (recruitment)</option>
                <option>NDIS - Allied health services </option>
                <option>NDIS - individual employment support</option>
                <option>PHaMs</option>
                <option>NDIS - youth</option>
                <option>Psych services for NDIS</option>
                <option>Allied Health Physical services for NDIS</option>
            </select>
        </div>    
        <div id="div-training">
            <h2>Need training?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>NDIS - individual employment support</option>
                <option>NDIS - youth</option>
                <option>Training - MHFA - for individuals</option>
                <option>Training - Accredited (RTO) - for individuals</option>
            </select>
        </div>
        <div id="div-injured">
            <h2>Been injured at work?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>Allied Health Physical services for individuals</option>
                <option>WR for individuals</option>
                <option>Psych services - Workplace rehab - Individual</option>
            </select>
        </div>
        <div id="div-refer">
            <h2>Want to make a referral?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>Diversity and inclusion for employers</option>
                <option>DES for individuals</option>
                <option>DES for community services</option>
                <option>DES for youth</option>
                <option>H@W for employers</option>
                <option>H@W for GP/Medical</option>
                <option>H@W for individuals</option>
                <option>NDIS - Allied health services</option>
                <option>NDIS - individual employment support</option>
                <option>NDIS - Community Services</option>
                <option>NDIS - youth</option>
                <option>Judgment Index (as a reseller) - for employers</option>
                <option>Psych Servcies - HR Consulting</option>
                <option>Psych services - Mediation / conflict management - for employers</option>
                <option>Psych services for NDIS</option>
                <option>Psych services - Counselling / Assessments (e.g. Medicare, WAPHA) - for GP/Medical</option>
                <option>Training - customised (e.g. OHS, wellness, psych, disability awareness) - for employers</option>
                <option>Training - MHFA - for employers</option>
                <option>Training - Accredited (RTO) - for employers</option>
                <option>Allied Health Physical services for employers</option>
                <option>WR for employers</option>
                <option>Allied Health Physical services for insurers</option>
                <option>WR for Insurers</option>
                <option>Allied Health Physical services for GP/Medical</option>
                <option>WR for GPs/Medical</option>
                <option>Allied Health Physical services for H@W</option>
                <option>Allied Health Physical services for NDIS</option>
                <option>Psych services - Workplace rehab - Employer</option>
                <option>Psych services - Workplace rehab - Insurer</option>
                <option>Psych services - Workplace rehab - GP/Medical</option>
            </select>
        </div>
        <div id="div-psych">
            <h2>I need psychological services?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>NDIS - individual employment support</option>
                <option>NDIS - youth</option>
                <option>Judgment Index (as a reseller) - for employers</option>
                <option>Psych Servcies - HR Consulting</option>
                <option>Psych services - EAP - for employer</option>
                <option>Psych services - Mediation / conflict management - for employers</option>
                <option>Psych services - Counselling  / Assessments (e.g. Medicare, WAPHA) - for individual</option>
                <option>Psych services - EAP - for individual</option>
                <option>Psych services for NDIS</option>
                <option>Psych services - Counselling / Assessments (e.g. Medicare, WAPHA) - for GP/Medical</option>
            </select>
        </div>
        <div id="div-employer">
            <h2>Are you an employer?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>Diversity and inclusion for employers</option>
                <option>DES for employers (recruitment)</option>
                <option>H@W for employers</option>
                <option>Judgment Index (as a reseller) - for employers</option>
                <option>Psych Servcies - HR Consulting</option>
                <option>Psych services - EAP - for employer</option>
                <option>Psych services - Mediation / conflict management - for employers</option>
                <option>Training - customised (e.g. OHS, wellness, psych, disability awareness) - for employers</option>
                <option>Training - MHFA - for employers</option>
                <option>Training - Accredited (RTO) - for employers</option>
                <option>Allied Health Physical services for employers</option>
                <option>WR for employers</option>
            </select>
        </div>
    </div>

</div>

$(document).ready(function(){
    $("#job a").click(function(){
        $("#div-job").show();
        $("#div-help").hide();
        $("#div-ndis").hide();
        $("#div-training").hide();
        $("#div-injured").hide();
        $("#div-refer").hide();
        $("#div-psych").hide();
        $("#div-employer").hide();
        $("li#job").addClass("active");
        $("li#help").removeClass("active");
        $("li#ndis").removeClass("active");
        $("li#training").removeClass("active");
        $("li#injured").removeClass("active");
        $("li#refer").removeClass("active");
        $("li#psych").removeClass("active");
        $("li#employer").removeClass("active");
    });
    $("#help").click(function(){
        $("#div-job").hide();
        $("#div-help").show();
        $("#div-ndis").hide();
        $("#div-training").hide();
        $("#div-injured").hide();
        $("#div-refer").hide();
        $("#div-psych").hide();
        $("#div-employer").hide();
        $("li#job").removeClass("active");
        $("li#help").addClass("active");
        $("li#ndis").removeClass("active");
        $("li#training").removeClass("active");
        $("li#injured").removeClass("active");
        $("li#refer").removeClass("active");
        $("li#psych").removeClass("active");
        $("li#employer").removeClass("active");
    });
    $("#ndis").click(function(){
        $("#div-job").hide();
        $("#div-help").hide();
        $("#div-ndis").show();
        $("#div-training").hide();
        $("#div-injured").hide();
        $("#div-refer").hide();
        $("#div-psych").hide();
        $("#div-employer").hide();
        $("li#job").removeClass("active");
        $("li#help").removeClass("active");
        $("li#ndis").addClass("active");
        $("li#training").removeClass("active");
        $("li#injured").removeClass("active");
        $("li#refer").removeClass("active");
        $("li#psych").removeClass("active");
        $("li#employer").removeClass("active");
    });
    $("#training").click(function(){
        $("#div-job").hide();
        $("#div-help").hide();
        $("#div-ndis").hide();
        $("#div-training").show();
        $("#div-injured").hide();
        $("#div-refer").hide();
        $("#div-psych").hide();
        $("#div-employer").hide();
        $("li#job").removeClass("active");
        $("li#help").removeClass("active");
        $("li#ndis").removeClass("active");
        $("li#training").addClass("active");
        $("li#injured").removeClass("active");
        $("li#refer").removeClass("active");
        $("li#psych").removeClass("active");
        $("li#employer").removeClass("active");
    });
    $("#injured").click(function(){
        $("#div-job").hide();
        $("#div-help").hide();
        $("#div-ndis").hide();
        $("#div-training").hide();
        $("#div-injured").show();
        $("#div-refer").hide();
        $("#div-psych").hide();
        $("#div-employer").hide();
        $("li#job").removeClass("active");
        $("li#help").removeClass("active");
        $("li#ndis").removeClass("active");
        $("li#training").removeClass("active");
        $("li#injured").addClass("active");
        $("li#refer").removeClass("active");
        $("li#psych").removeClass("active");
        $("li#employer").removeClass("active");         
    });
    $("#refer").click(function(){
        $("#div-job").hide();
        $("#div-help").hide();
        $("#div-ndis").hide();
        $("#div-training").hide();
        $("#div-injured").hide();
        $("#div-refer").show();
        $("#div-psych").hide();
        $("#div-employer").hide();
        $("li#job").removeClass("active");
        $("li#help").removeClass("active");
        $("li#ndis").removeClass("active");
        $("li#training").removeClass("active");
        $("li#injured").removeClass("active");
        $("li#refer").addClass("active");
        $("li#psych").removeClass("active");
        $("li#employer").removeClass("active"); 
    });
    $("#psych").click(function(){
        $("#div-job").hide();
        $("#div-help").hide();
        $("#div-ndis").hide();
        $("#div-training").hide();
        $("#div-injured").hide();
        $("#div-refer").hide();
        $("#div-psych").show();
        $("#div-employer").hide();
        $("li#job").removeClass("active");
        $("li#help").removeClass("active");
        $("li#ndis").removeClass("active");
        $("li#training").removeClass("active");
        $("li#injured").removeClass("active");
        $("li#refer").removeClass("active");
        $("li#psych").addClass("active");
        $("li#employer").removeClass("active");
    });
    $("#employer").click(function(){
        $("#div-job").hide();
        $("#div-help").hide();
        $("#div-ndis").hide();
        $("#div-training").hide();
        $("#div-injured").hide();
        $("#div-refer").hide();
        $("#div-psych").hide();
        $("#div-employer").show();
        $("li#job").removeClass("active");
        $("li#help").removeClass("active");
        $("li#ndis").removeClass("active");
        $("li#training").removeClass("active");
        $("li#injured").removeClass("active");
        $("li#refer").removeClass("active");
        $("li#psych").removeClass("active");
        $("li#employer").addClass("active");
    });
});

4 个答案:

答案 0 :(得分：1)

您可以选择倍数，所以：

$("#div-help").hide();
$("#div-ndis").hide();

变为

$("#div-help, #div-ndis").hide();

与其他人一起冲洗并重复，这将更加简化

你还应该为重复显示/隐藏等单独的功能，而不是调用很多选择器，调用函数

所以从这个：

$("#div-job").hide();
$("#div-help").hide();
$("#div-ndis").hide();

我们去：

$("#div-job, #div-help, #div-ndis").hide();

将它包装在它自己的函数中：

function hideDivs() {
    $("#div-job, #div-help, #div-ndis").hide();
}

因此，如果需要隐藏这些内容，您只需致电：

hideDivs();

你可以做更多的事情，但这是一个开始

答案 1 :(得分：1)

我建议在其上使用data-属性和选择器。最好保留ID和类以供CSS使用。

这变为：

<!-- Your selectors -->
<li data-selector="job" id="job" class="active">...</li>
...

<!-- Your selection -->
<div data-selection="job" id="div-job">...</div>
...

然后在剧本方面：

$('[data-selector]').on('click', function() {
  // Hide all selections
  $('[data-selector'].removeClass('active');
  $('[data-selection'].hide();

  // Show only the requested one
  $(this).addClass('active');
  $('[data-selection=' + $(this).data('selector') + ']').show();
});

答案 2 :(得分：0)

您可以使用一些通用选择器，因为您使用id并且应该是唯一的。看看下面的代码。

$('#selector li').on('click', function(){
  var current = "#div-" + $(this).prop('id');
  $("#selector li").removeClass("active");
  $("#selection > div").hide();
  $(this).addClass("active");
  $(current).show();
});

在上面的代码中，首先我使用$('#selector li').on('click', function(){而不是每次点击使点击事件变得普遍。接下来是HTML的结构，li和等效的div具有相同的名称，但div-除外。因此，我创建了一个变量并获取当前点击元素的id，并添加了div-，以便将当前div定位到show。

现在，我正在使用removeClass/hide和$("#selector li").removeClass("active");减少重复的代码$("#selection > div").hide();。符号>将定位特定element的直接子女。在我们的例子中，所有div都是#selection的直接子项。最后，我将显示当前div并为当前元素添加active类。

$('#selector li').on('click', function(){
   var current = "#div-" + $(this).prop('id');
   $("#selector li").removeClass("active");
   $("#selection > div").hide();
   $(this).addClass("active");
   $(current).show();
})
body {background-image: url(images/bg-page.jpg); background-size: cover; repeat: no-repeat;}
#selector {list-style: none; max-width: 1322px; margin: 0 auto; padding-left: 0; -webkit-padding-start: 0; margin-bottom: 0;}
#selector li {display: inline-block; width: 11.625%; margin-right: 0.75%; margin-top: 1%; background-color: #012F60; height: 70px; display: inline-table; vertical-align: top}
#selector li:last-child {margin-right: 0%}
#selector li#job.active {background-color: #93CB32;}
#selector li#help.active {background-color: #EC832A;}
#selector li#ndis.active {background-color: blue;}
#selector li#training.active {background-color: purple;}
#selector li#injured.active {background-color: orange;}
#selector li#refer.active {background-color: yellow;}
#selector li#psych.active {background-color: aqua;}
#selector li#employer.active {background-color: black;}
#selector li a {color: white; text-align: center; vertical-align: middle; display: table-cell; text-decoration: none;}
#selection {max-width: 1322px; margin: 0 auto; margin-top: 0;}
#selection div {padding: 1em 0;}
#selection h2 {margin-top: 0;}
#div-job, #div-help, #div-ndis, #div-training, #div-injured, #div-refer, #div-psych, #div-employer {display: none; text-align: center; color: white;}
#div-job {background-color: #93CB32;}
#div-help {background-color: #EC832A;}
#div-ndis {background-color: blue;}
#div-training {background-color: purple;}
#div-injured {background-color: orange;}
#div-refer {background-color: yellow;}
#div-psych {background-color: aqua;}
#div-employer {background-color: black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">

    <ul id="selector">
        <li id="job" class="active"><a href="#">I want to find a job</a></li>
        <li id="help"><a href="#">I need help at work</a></li>
        <li id="ndis"><a href="#">NDIS</a></li>
        <li id="training"><a href="#">I need training</a></li>
        <li id="injured"><a href="#">I've been injured at work</a></li>
        <li id="refer"><a href="#">I want to refer</a></li>
        <li id="psych"><a href="#">Psych service</a></li>
        <li id="employer"><a href="#">I'm an employer</a></li>
    </ul>
    <div id="selection">
        <div id="div-job">
            <h2>Looking for a job?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>DES for individuals</option>
                <option>DES for youth</option>
                <option>NDIS - individual employment support</option>
                <option>NDIS - youth</option>
                <option>PHaMs</option>
                <option>DES for employers (recruitment)</option>
            </select>
        </div>
        <div id="div-help">
            <h2>Looking for help?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>NDIS - youth</option>
                <option>Psych services - EAP - for individual</option>
                <option>Psych services for H@W - individual</option>
                <option>Psych services for H@W - corporate</option>
                <option>Allied Health Physical services for H@W</option>
                <option>Allied Health Physical services for individuals</option>
                <option>WR for individuals</option>
                <option>Psych services - Workplace rehab - Individual</option>
                <option>NPA</option>
            </select>
        </div>
        <div id="div-ndis">
            <h2>National Disability Insurance Scheme (NDIS)?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>DES for employers (recruitment)</option>
                <option>NDIS - Allied health services </option>
                <option>NDIS - individual employment support</option>
                <option>PHaMs</option>
                <option>NDIS - youth</option>
                <option>Psych services for NDIS</option>
                <option>Allied Health Physical services for NDIS</option>
            </select>
        </div>    
        <div id="div-training">
            <h2>Need training?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>NDIS - individual employment support</option>
                <option>NDIS - youth</option>
                <option>Training - MHFA - for individuals</option>
                <option>Training - Accredited (RTO) - for individuals</option>
            </select>
        </div>
        <div id="div-injured">
            <h2>Been injured at work?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>Allied Health Physical services for individuals</option>
                <option>WR for individuals</option>
                <option>Psych services - Workplace rehab - Individual</option>
            </select>
        </div>
        <div id="div-refer">
            <h2>Want to make a referral?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>Diversity and inclusion for employers</option>
                <option>DES for individuals</option>
                <option>DES for community services</option>
                <option>DES for youth</option>
                <option>H@W for employers</option>
                <option>H@W for GP/Medical</option>
                <option>H@W for individuals</option>
                <option>NDIS - Allied health services</option>
                <option>NDIS - individual employment support</option>
                <option>NDIS - Community Services</option>
                <option>NDIS - youth</option>
                <option>Judgment Index (as a reseller) - for employers</option>
                <option>Psych Servcies - HR Consulting</option>
                <option>Psych services - Mediation / conflict management - for employers</option>
                <option>Psych services for NDIS</option>
                <option>Psych services - Counselling / Assessments (e.g. Medicare, WAPHA) - for GP/Medical</option>
                <option>Training - customised (e.g. OHS, wellness, psych, disability awareness) - for employers</option>
                <option>Training - MHFA - for employers</option>
                <option>Training - Accredited (RTO) - for employers</option>
                <option>Allied Health Physical services for employers</option>
                <option>WR for employers</option>
                <option>Allied Health Physical services for insurers</option>
                <option>WR for Insurers</option>
                <option>Allied Health Physical services for GP/Medical</option>
                <option>WR for GPs/Medical</option>
                <option>Allied Health Physical services for H@W</option>
                <option>Allied Health Physical services for NDIS</option>
                <option>Psych services - Workplace rehab - Employer</option>
                <option>Psych services - Workplace rehab - Insurer</option>
                <option>Psych services - Workplace rehab - GP/Medical</option>
            </select>
        </div>
        <div id="div-psych">
            <h2>I need psychological services?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>NDIS - individual employment support</option>
                <option>NDIS - youth</option>
                <option>Judgment Index (as a reseller) - for employers</option>
                <option>Psych Servcies - HR Consulting</option>
                <option>Psych services - EAP - for employer</option>
                <option>Psych services - Mediation / conflict management - for employers</option>
                <option>Psych services - Counselling  / Assessments (e.g. Medicare, WAPHA) - for individual</option>
                <option>Psych services - EAP - for individual</option>
                <option>Psych services for NDIS</option>
                <option>Psych services - Counselling / Assessments (e.g. Medicare, WAPHA) - for GP/Medical</option>
            </select>
        </div>
        <div id="div-employer">
            <h2>Are you an employer?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>
                <option>Diversity and inclusion for employers</option>
                <option>DES for employers (recruitment)</option>
                <option>H@W for employers</option>
                <option>Judgment Index (as a reseller) - for employers</option>
                <option>Psych Servcies - HR Consulting</option>
                <option>Psych services - EAP - for employer</option>
                <option>Psych services - Mediation / conflict management - for employers</option>
                <option>Training - customised (e.g. OHS, wellness, psych, disability awareness) - for employers</option>
                <option>Training - MHFA - for employers</option>
                <option>Training - Accredited (RTO) - for employers</option>
                <option>Allied Health Physical services for employers</option>
                <option>WR for employers</option>
            </select>
        </div>
    </div>

</div>

答案 3 :(得分：0)

所以你可以给所有div和li元素一个像

这样的公共类 
 <div id="div-training" class="div-class">
 <li id="job" class="active li-class"><a href="#">I want to find a job</a></li>

这会将所有jquery减少到

$('.li-class').each(function() {
    // for each li add an onclick
    $(this).click(function() {
        // hide all divs
        $('.div-class').each(function() {
            $(this).hide()
        })
        // get current div assuming its named div-[id of clicked li]
        var current = $(this).attr("id");
        var div_id = "#div-" + current;
        // reshow correct div
        $(div_id).show();

        $('.li-class').each(function() {
            // If not the clicked one add active
            if ($(this).attr("id") != current) {
                $(this).removeClass("active");
            } else {
                $(this).addClass("active");
            }
        })
    });
})

这是未经测试的，因此可能会出现一些错误。应该给你一个好主意。您还可以添加指向其他div的html属性，以避免在javascript中创建名称

相关问题
最新问题