Jqueryコードをクリーンアップするにはどうすればよいですか？

Question

私は現在、JQueryを試していて、自分のポートフォリオを作って、クリックしたときに表示されるプロジェクトを変更しようとしました。私はそこに重複したコードがたくさんあり、それをきれいにしたいのですが、私はJavaでどのようにしていたのか知​​っていますが、メソッドの名前は忘れてしまいました。最後に

私はこのような何かを持っていると思いますが、私はまさにそれを行う方法を忘れてしまった：

$('.projects a[href^="#"]').on('click',function (e){ 

     var href = $(this).attr('href');; 

     changePortfolio(String head, String text, String imgsource){ 
       $(".description-head").html(head); 
       $(".description-text").html(text); 
       $('.preview').attr('src',imgsource); 
     } 

     if(href == "#project-portfolio"){ 

      changePortfolio("Portfolio", "this is my portfolio", "bg.png"); 

     } 

私の現在のコード：読書のための

$('.projects a[href^="#"]').on('click',function (e){ 

     var href = $(this).attr('href');; 

     if(href == "#project-portfolio"){ 

      $(".description-head").html("PORTFOLIO WEBSITE"); 
      $(".description-text").html("This is the portfolio website description"); 
      $('.preview').attr('src','img/bg.jpg'); 

     } else if(href == "#project-preview2"){ 

      $(".description-head").html("PREVIEW 2"); 
      $(".description-text").html("This is the preview 2 description"); 
      $('.preview').attr('src','img/placeholder.jpg'); 

     } else if(href == "#project-preview3"){ 

      $(".description-head").html("PREVIEW 3"); 
      $(".description-text").html("This is the preview 3 description"); 
      $('.preview').attr('src','img/placeholder.jpg'); 

     } else if(href == "#project-preview4"){ 

      $(".description-head").html("PREVIEW 4"); 
      $(".description-text").html("This is the preview 4 description"); 
      $('.preview').attr('src','img/placeholder.jpg'); 

     } else if(href == "#project-preview5"){ 

      $(".description-head").html("PREVIEW 5"); 
      $(".description-text").html("This is the preview 5 description"); 
      $('.preview').attr('src','img/placeholder.jpg'); 

     } 
    }); 

感謝:)

Answer 1

化粧品の変更を機能に凝縮することが第一歩でした。私の意見で

const HREF_TABLE = { 
    'project-portfolio': { 
     'head': "PORTFOLIO WEBSITE", 
     'text': 'This is the portfolio website description', 
     'preview': 'img/bg.jpg' 
    }, 
    'project-preview2': { 
     'head': "PREVIEW 2", 
     'text': 'This is the preview 2 description', 
     'preview': 'img/placeholder.jpg' 
    } 
} 

$('.projects a[href^="#"]').on('click', function() { 
    let href = $(this).attr('href'); 
    let changeTo = HREF_TABLE[href.substr(1)]; 

    if (changeTo !== undefined) { 
     changePortfolio(changeTo); 
    } 
}); 

、これを編集することが非常に簡単：

switch (href) { 
    case "#project-portfolio": 
     changePortfolio(...); 
     break; 
    case "#project-preview2": 
     changePortfolio(...); 
     break; 
    // correspondingly for every case 
    default: 
     changePortfolio(...) // whatever the 'backup' should be 
          // if none of the above cases are met 
} 

Answer 2

はこのような何かを考えてみましょう：私はあなたの長いと厄介if/else文を取り、switchを使用して、そのようにされることをお勧め第二のステップスイッチケースメカニズムを使用する代わりに...