Simplify JQuery Codes [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 8 years ago.

Improve this 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. :)

Answer 1

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