如何清理我的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代码？

回答

相关问题