javascript – 如何减少我的jQuery代码中的冗余?

前端之家收集整理的这篇文章主要介绍了javascript – 如何减少我的jQuery代码中的冗余?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的 JavaScript文件的大小是因为我有数百个链接而失控,每个都有自己的jQuery函数,即使它们基本上都是相同的任务.

这是一个简短的摘录:

  1. $("#link1").click(function ()
  2. {
  3. $(".myDiv").hide();
  4. $("#myDiv1").toggle();
  5. });
  6.  
  7. $("#link2").click(function ()
  8. {
  9. $(".myDiv").hide();
  10. $("#myDiv2").toggle();
  11. });
  12.  
  13. $("#link3").click(function ()
  14. {
  15. $(".myDiv").hide();
  16. $("#myDiv3").toggle();
  17. });

有没有办法抽象一些逻辑,所以我只有一个功能,而不是数百个做同样的事情?

解决方法

您可以向所有执行相同操作的链接添加一个类,并在该类上使用jQuery.
  1. <a href='whatever' id='link_1' class='toggler'>text</a>
  2. <a href='whatever' id='link_2' class='toggler'>text</a>

jQuery代码将是:

  1. $(".toggler").click( function(){
  2. // toggle the divs
  3. var number = $(this).attr("id").split('_')[1];
  4. $(".myDiv").hide();
  5. $("#myDiv"+ number).toggle();
  6. });

猜你在找的jQuery相关文章