How can I avoid the repetitive code in this jQuery code?

问题

I am making a site and this code lets me have several pages in 1 .html file. Can the iterative-ness of this code be avoided? Can it be simplified?

<script type="text/javascript">
        var x = 300;
        $(function() { 
            $("#indexLink").click(function() { 
                $("#content>div").not("#start").hide(x);
                $("#index").show(x);
                $('nav>ul>li').removeClass('active');
                $('#indexLink').addClass('active');
            });

            $("#leerlingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#leerling").show(x); 
                $('nav>ul>li').removeClass('active');
                $('#leerlingLink').addClass('active');
            });

            $("#bestemmingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#bestemming").show(x);
                $('nav>ul>li').removeClass('active');
                $('#bestemmingLink').addClass('active');
            });

            $("#betalingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#betaling").show(x);
                $('nav>ul>li').removeClass('active');
                $('#betalingLink').addClass('active');
            });
        });

</script>

回答1:

what do you mean by iterative-ness ?

if you want your code to be DRY you could just write somthing like this:

<script type="text/javascript">
    var x = 300;
    $(function () {
        $("#indexLink,#betalingLink,#bestemmingLink,#leerlingLink").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#"+$(this).attr("id").slice(0,-4)).show(x);
            $('nav>ul>li').removeClass('active');
            $('#indexLink').addClass('active');
        });
    });
</script>

this will take all selectors, one at the time, and make all of them run that code of yours, basically the same as you typed, but in one selector only

EDIT

Fixed div showing

EDIT2

added jsfiddle to show it working: http://jsfiddle.net/NicosKaralis/Vurjf/

回答2:

Assuming that the things being clicked are something other than anchor links you could give the elements all the same class and write this once -

EDIT: made a change based on the information that these are anchor links.

$('.classname').click(function(event) {
    event.preventDefault(); 
    $("#content>div").not("#start").hide(x);
    var idString = this.id
    var shortIDString = idString.slice(0,-4); //remove the 'Link'
    $("#" + shortIDString).show(x);
    $('nav>ul>li').removeClass('active');
    $(this).addClass('active');
});

回答3:

You can use a for loop and construct the selectors:

$(function () {
    var items = ["index", "leerling", "bestemming", "betaling"];
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        $("#" + item + "Link").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#" + item).show(x);
            $('nav>ul>li').removeClass('active');
            $('#' + item + 'Link').addClass('active');
        });
    }
});

You could also add a handler to all #whateverLinks and then detect the link name based on the id value of the event target.

来源：https://stackoverflow.com/questions/14715532/how-can-i-avoid-the-repetitive-code-in-this-jquery-code