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

Question

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>

Please show the corresponding html. Chances are by using a class you can have one function that will work for all scenarios. — Jared, Feb 05 '13 at 19:41
Have you made any attempt to consolidate it into one handler? — Kevin B, Feb 05 '13 at 19:44
You probably want to change the title of your question. You are trying to keep your code DRY, generally when your talking about programming `iterative` refers to a loop. — Ryan, Feb 05 '13 at 19:44
@user2044453 Did you delete your original code? Possible to get it back? It was useful for others to find solutions to similar problems. — showdev, Feb 07 '13 at 04:17

Jay Blanchard · Answer 1 · 2013-02-05T20:06:14.627

1

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

edited Feb 05 '13 at 20:06

answered Feb 05 '13 at 19:48

Jay Blanchard

34,243
16
77
119

They are anchor links, this shows the one you click and hides the rest so it looks like multiple pages but actually it is 1 page. (Sorry English is not my main language!) – Skullyhoofd Feb 05 '13 at 20:03
If they are anchor links you'd still want to add a class to them and make the change that I just added. – Jay Blanchard Feb 05 '13 at 20:05
This is the way to go, so +1, but too many variables IMO. `$("#" + this.id.slice(0,-4)).show(x);` – the system Feb 05 '13 at 20:13
Thanks @thesystem, I just ran it together quickly and showed the logic for the OP – Jay Blanchard Feb 05 '13 at 20:19
This unfortunaly didnt work but Nicos's solution did. Still thanks for trying to help though! – Skullyhoofd Feb 05 '13 at 20:23
1

@user2044453: If it "didn't work", then you didn't implement the answer as described. Probably didn't bother giving a class to your elements. – the system Feb 05 '13 at 21:19

score 0 · Answer 2 · answered Feb 05 '13 at 19:45

0

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.

answered Feb 05 '13 at 19:45

Matt Zeunert

16,075
6
52
78

This looks like something that could work but it doesn't work with this. I have posted my code for more info for you guys! English is not my main language, sorry! pastebin.com/xHmZTQSe HTML pastebin.com/VWUvNYSq CSS – Skullyhoofd Feb 05 '13 at 20:04
Could you create a JS fiddle with the code that gets returned from the server? What specifically doesn't work? – Matt Zeunert Feb 05 '13 at 20:07

Nicos Karalis · Accepted Answer · 2013-02-05T20:15:35.013

0

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/

edited Feb 05 '13 at 20:15

answered Feb 05 '13 at 19:46

Nicos Karalis

3,724
4
33
62

With iterative-ness I mean that I would like to simplify the code that I have to repeat. Sorry, English is not my main language. Also, your suggestion almost works, but it only shows the #leerlingen div when I click any of the nav items. – Skullyhoofd Feb 05 '13 at 19:52
can you post at least a squeleton of your html? – Nicos Karalis Feb 05 '13 at 19:56
Your English is fine, stop apologizing. – Barmar Feb 05 '13 at 20:05
You didn't deal with the change in the index link at #leerling. that changes each time. – Jay Blanchard Feb 05 '13 at 20:07
1

@JayBlanchard yup, noticed, i'm trying to fix it – Nicos Karalis Feb 05 '13 at 20:09
Yes I think @JayBlanchard is correct about the mistike in this suggestion – Skullyhoofd Feb 05 '13 at 20:10
You're not handling the `.addClass()` line. – the system Feb 05 '13 at 20:20
Thanks! This almost worked (active class didn't get added) so I fixed this by changing #indexLink in the last line to this and that worked. Thanks a lot for your help! – Skullyhoofd Feb 05 '13 at 20:21
1

@thesystem I fixed it by changing #indexLink to this, and that worked. So thanks Nicos :D – Skullyhoofd Feb 05 '13 at 20:22

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

3 Answers3

Linked