简化 JQuery 代码 [关闭]

Question

美好的一天！

我想问一些事情。有没有这样一种方法可以缩短我在 jquery 中的这些行？我的意思是特别在 if-else 部分。谢谢！

---

$("#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

    });

---

看起来有点匆忙。另外，我还在学习 jquery，所以我为非常规的语法道歉。 :)

Answer 1

您可能会在http://codereview.stackexchange.com 中获得对此请求的更多响应，但这里有一个想法，说明如何使用查找表而不是多个if/else if 语句来简化第一块代码并避免重复如此多的代码：

$("#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