Simplify JQuery Codes

Question

Good Day!

I'd like to ask something . Is there such a way that could shorten these lines of mine in jquery? I mean specially in the if-else part. Thank you!

$("#banner a").bind("click",function(event){//2 

event.preventDefault();

target = $(this).attr("href");

    if(target=="#home"){
               $("#prevID").attr("class","");
               $("#nextID").attr("class","next");
               $("#nextID").attr("href","#home");
               $("#prevID").attr("href","#home");

           }else if(target=="#newsletter"){
                $("#prevID").attr("class","prev");
               $("#nextID").attr("href","#newsletter");
               $("#prevID").attr("href","#newsletter");

           }else if(target=="#directions"){
               $("#prevID").attr("class","prev");
               $("#nextID").attr("href","#directions");
               $("#prevID").attr("href","#directions");

           }else if(target=="#contact"){
               $("#prevID").attr("class","prev");
               $("#nextID").attr("class","");
               $("#nextID").attr("href","#contact");
               $("#prevID").attr("href","#contact");

           }else{}

           $("html, body").stop().animate({
               scrollLeft: $(target).offset().left,
               scrollTop: $(target).offset().top
           }, 1200);
       });//closing 2

       $(".next").bind("click",function(event){//3
           event.preventDefault();
            target = $(this).attr("href");
            if(target=='#home'){
               a='#newsletter';
               $(".next").attr("href","#newsletter");
               $("#prevID").attr("class","prev");
               $("#prevID").attr("href","#newsletter");
           }else if(target=='#newsletter'){
                 a='#directions';
                 $(".next").attr("href","#directions");
                  $("#prevID").attr("href","#directions");
           }else if(target=='#directions'){
                a='#contact';
                 $(".next").attr("href","#contact");
                  $("#prevID").attr("href","#contact");
                $(".next").attr("class","");
           }else{}


           $("html, body").stop().animate({
               scrollLeft: $(a).offset().left,
               scrollTop: $(a).offset().top
           }, 1200);

         // $(".next").attr("href","#");
       });//closing 3

       $("#prevID").bind("click",function(event){//3
           event.preventDefault();
            target = $(this).attr("href");

            if(target=='#newsletter'){
               a='#home';
               $("#prevID").attr("href","#home");
               $(".next").attr("href","#home");
                $("#prevID").attr("class","");
           }else if(target=='#directions'){
                a='#newsletter';
               $("#prevID").attr("href","#newsletter");
               $(".next").attr("href","#newsletter");


           }else if(target=='#contact'){
                a='#directions';
               $("#prevID").attr("href","#directions");
              $("#nextID").attr("class","next");
              $("#nextID").attr("href","#directions");

           }else{}


           $("html, body").stop().animate({
               scrollLeft: $(a).offset().left,
               scrollTop: $(a).offset().top
           }, 1200);

         // $(".next").attr("href","#");
       });//closing 3

    });

It looks kinda hustle to look at. Also, Im still learnng jquery so my apologies for the unconventional syntaxes. :)

Go there: http://codereview.stackexchange.com/ or hire a developper — A. Wolff, Apr 15 '13 at 14:51
Im sorry. Still getting the heck of this. But thanks for the info. — Joross Barredo, Apr 16 '13 at 02:12

score 0 · Accepted Answer · answered Apr 15 '13 at 16:34

You'd probably get more responses to this request in http://codereview.stackexchange.com, but here's an idea for how you could simplify the first block of code and avoid repeatingso much code using a lookup table instead of multiple if/else if statements:

$("#banner a").click(function(event){//2 
    event.preventDefault();
    target = $(this).attr("href");
    var data = {
        // target: [prevID class, nextID class]
        "#home": ["", "next"],
        "#newsletter": ["prev", null],
        "#directions": ["prev", null],
        "#contact": ["prev", ""]
    };
    var item = data[target];
    if (item) {
        $("#nextID").attr("href", target);
        $("#prevID").attr("href", target).attr("class", item[0]);
        if (item[1] !== null) {
            $("#nextID").attr("class", item[1]);
        }
    }

   $("html, body").stop().animate({
       scrollLeft: $(target).offset().left,
       scrollTop: $(target).offset().top
   }, 1200);
});//closing 2

Thanks for your help. this somewhat lessens my code and my apology for posting it here. Haven't got a clue to the site http://codereview.stackexchange.com . Thank you! — Joross Barredo, Apr 16 '13 at 02:11
@JorossBarredo - More importantly than pure number of lines of code, this doesn't have repeated lines of code and it's more extensible. For example, you can add more items by just adding new items to the table. Or, you can add new attributes by just adding one new line of code and a new item to each array. Or, if you want to change the code, you only have to change one place rather than four. You may want to read about [DRY](http://en.wikipedia.org/wiki/Don't_repeat_yourself) (don't repeat yourself. — jfriend00, Apr 16 '13 at 02:19

Simplify JQuery Codes

1 Answers1