压缩重复的jQuery函数

我正在寻找一种方法来减少我的jQuery函数的膨胀，将重复的函数组合成一个封面的所有脚本。

我有一系列类别按钮，点击后，过滤元素列表，只显示与匹配类别对应的元素。

我的代码工作正常，但每个’类别’重复11次，为页面添加了一些严重的膨胀。

||| JSFiddle在这里 |||

其中一个function的样本如下……

$('#toggle-greendeal').click(function() { $('.update-greendeal').show(200); $('.update-broker').hide(200); $('.update-cases').hide(200); $('.update-training').hide(200); $('.update-collections').hide(200); $('.update-debt').hide(200); $('.update-wealth').hide(200); $('.update-business').hide(200); $('.update-solar').hide(200); $('.update-pension').hide(200); $('.update-welfare').hide(200); $('#toggle-all').addClass('toggle-inactive'); $('#toggle-broker').addClass('toggle-inactive'); $('#toggle-cases').addClass('toggle-inactive'); $('#toggle-training').addClass('toggle-inactive'); $('#toggle-collections').addClass('toggle-inactive'); $('#toggle-debt').addClass('toggle-inactive'); $('#toggle-wealth').addClass('toggle-inactive'); $('#toggle-business').addClass('toggle-inactive'); $('#toggle-solar').addClass('toggle-inactive'); $('#toggle-pension').addClass('toggle-inactive'); $('#toggle-welfare').addClass('toggle-inactive'); $('#toggle-greendeal').removeClass('toggle-inactive'); return false; }); 

函数的第一部分显示正确类别类中的div，并隐藏所有其他非匹配类。

第二部分“灰显”除了单击的按钮之外的所有按钮。

代码重复#toggle-greendeal ， #toggle-broker ， #toggle-cases ， #toggle-training ， #toggle-collections ， #toggle-debt ， #toggle-wealth ， #toggle-business ， #toggle-solar ， #toggle-pension ， #toggle-welfare 。

我知道必须有一种方法，但我不确定从哪种方法开始，以及使用什么技术来根据点击的id来定位类。

任何人都可以指出我正确的方向或给我一个简单的解决方案吗？

Answer 1

可以使用data-target属性简化它

 
 
View all updates
 
Green-Deal ECO
 
Cases
 
Training
 
Broker-Lender
 
Debt Management
 
Collections
 
Alternative Investment
 
Business
   

然后所有点击事件都可以简化为

 $(function () { $('.product-toggle-buttons .toggle-button').not('#toggle-all').addClass('toggle-inactive'); var $items = $('.update-item'); var $buttons = $('.product-toggle-buttons .toggle-button').click(function () { var $this = $(this), target = $this.data('target'); $buttons.not($this).addClass('toggle-inactive'); $this.removeClass('toggle-inactive'); if (target) { $items.not(target).hide(200); $(target).show(200); } else { $items.show(200); } return false; }); }); 

演示： 小提琴

Answer 2

您可以使用属性选择器缩短它：

 $('#toggle-greendeal').click(function(e) { $('[class^="update"]').hide(200); $('.update-greendeal').show(200); $('[id^="toggle"]').addClass('toggle-inactive'); $(this).removeClass('toggle-inactive'); e.preventDefault(); }); 

Answer 3

您可以使用以下内容：

 $('.update-greendeal, .update-broker, ....., .update-welfare').show(200); 

或者你可以为所有11个元素添加另一个类，假设它将更新并调用

 $('.updating').show(200) 

addClass相同（“toggle-inactive”）;