[英]Condense repetitive jQuery functions
我正在寻找一种方法来减少我的jQuery函数的膨胀,将重复的函数组合成一个封面的所有脚本。
我有一系列类别按钮,点击后,过滤元素列表,只显示与匹配类别对应的元素。
我的代码工作正常但是每个'类别'重复11次,为页面添加了一些严重的膨胀。
||| JSFiddle在这里 |||
其中一个功能的样本如下......
$('#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来定位类。
任何人都可以指出我正确的方向或给我一个简单的解决方案吗?
可以使用data-target
属性简化它
<div class="product-toggle-buttons">
<div class="toggle-button single-line" id="toggle-all" data-target="">View all updates</div>
<div class="toggle-button" id="toggle-greendeal" data-target=".update-greendeal">Green-Deal ECO</div>
<div class="toggle-button single-line" id="toggle-cases" data-target=".update-cases">Cases</div>
<div class="toggle-button single-line" id="toggle-training" data-target=".update-training">Training</div>
<div class="toggle-button" id="toggle-broker" data-target=".update-broker">Broker-Lender</div>
<div class="toggle-button" id="toggle-debt" data-target=".update-debt">Debt Management</div>
<div class="toggle-button single-line" id="toggle-collections" data-target=".update-collections">Collections</div>
<div class="toggle-button" id="toggle-wealth" data-target=".update-wealth">Alternative Investment</div>
<div class="toggle-button single-line" id="toggle-business" data-target=".update-business">Business</div>
<!--<div class="toggle-button single-line" id="toggle-solar">Solar </div>
<div class="toggle-button" id="toggle-welfare">Welfare Rights</div>
<div class="toggle-button" id="toggle-pension">Pension Transfer</div>-->
</div>
然后所有点击事件都可以简化为
$(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;
});
});
演示: 小提琴
您可以使用属性选择器缩短它:
$('#toggle-greendeal').click(function(e) {
$('[class^="update"]').hide(200);
$('.update-greendeal').show(200);
$('[id^="toggle"]').addClass('toggle-inactive');
$(this).removeClass('toggle-inactive');
e.preventDefault();
});
您可以使用以下内容:
$('.update-greendeal, .update-broker, ....., .update-welfare').show(200);
或者你可以为所有11个元素添加另一个类,假设它将更新并调用
$('.updating').show(200)
addClass相同(“toggle-inactive”);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.