如何清理我的Jquery代碼？

-3

我目前正在試驗JQuery，並試圖讓自己的投資組合能夠改變點擊顯示的項目。我在那裏有很多重複的代碼，並且想要清理它，我知道我是如何在Java中使用它，但是我忘記了方法的名稱。如何清理我的Jquery代碼？

最後，我想有這樣的事情，但我忘了怎麼辦這正是：

$('.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'); 

     } 
    });

感謝您的閱讀:)

來源

2017-03-18 Sten

你可能想問[Codereview.SE]（http://codereview.stackexchange.com/）這樣的問題，它專門檢查代碼並評論它。 –

將外觀變化凝聚成功能是第一步。第二步我建議是把你的長而雜亂if/else聲明和使用switch，像這樣：

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 
}

來源

2017-03-18 12:00:06

謝謝，這消除了我的代碼中的很多混亂。我似乎無法讓changePortfolio工作，你知道如何解決它或這種風格的編程名稱（我忘了），所以我可以搜索網頁？ – Sten

也許這是你從Java獲得的東西，但是在JS中你並沒有聲明參數的數據類型，所以把你的參數列表改爲'（head，text，imgsource）'會有幫助。 –

考慮這樣的事情：

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

在我看來，多方便地編輯這而不是使用開關盒機制...

來源

2017-03-18 12:09:27

如何清理我的Jquery代碼？

回答

相關問題