压缩重复的jQuery函数 [英] Condense repetitive jQuery functions
问题描述
我正在寻找一种方法来减少我的jQuery函数的膨胀，将重复的函数组合成一个覆盖所有脚本。
我有一系列类别
我的代码工作正常，但它会重复11次为每个'类别在页面上增加了一些严重的膨胀。
||| JSFiddle在这里 |||
其中一个函数的示例如下：
$（'＃toggle-greendeal' ）.click（function（）{
$（'。update-greendeal'）。show（200）;
$（'update-broker'）。
$（'。update-cases'）。hide（200）;
$（'。update-training'）。hide（200）;
$ ）.hide（200）;
$（'。update-debt'）。hide（200）;
$（'update-wealth'）。 （'.update-business'）。hide（200）;
$（'。update-solar'）。hide（200）;
$ ）;
$（'。update-welfare'）。hide（200）;
$（'＃toggle-all'）。addClass（'toggle-inactive'）;
$（'＃toggle-broker'）。addClass（'toggle-inactive'）;
$（'＃toggle-cases'）。addClass（'toggle-inactive'）;
$ '＃toggle-inactive'）;
$（'toggle-inactive'）;
$（'债务）。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-training ，＃toggle-collections ， ＃toggle-debt ，＃toggle-wealth ，＃toggle-business ，＃toggle-solar ，＃toggle-pension ，＃toggle-welfare 。
我知道必须有一个方法，但我不知道什么方法开始和使用什么技术来定位类基于哪个id被点击
任何人都可以指向正确的方向或者给我一个容易解决的问题？
可以使用数据目标属性进行简化
< div class =product-toggle-buttons>
< div class =toggle-button single-lineid =toggle-alldata-target =>查看所有更新< / div>
< div class =toggle-buttonid =toggle-greendealdata-target =。update-greendeal>绿色ECO< / div>
< div class =toggle-button single-lineid =toggle-casesdata-target =。update-cases>案例< / div&
< div class =toggle-button single-lineid =toggle-trainingdata-target =。update-training> Training< / div>
< div class =toggle-buttonid =toggle-brokerdata-target =。update-broker> Broker-Lender< / div>
< div class =toggle-buttonid =toggle-debtdata-target =。update-debt>债务管理< / div>
< div class =toggle-button single-lineid =toggle-collectionsdata-target =。update-collections> Collections< / div>
< div class =toggle-buttonid =toggle-wealthdata-target =。update-wealth> Alternative Investment< / div>
< div class =toggle-button single-lineid =toggle-businessdata-target =。update-business> Business< / div&
< / - < div class =toggle-button single-lineid =toggle-solar> Solar< / div>
< div class =toggle-buttonid =toggle-welfare>福利权利< / div>
< div class =toggle-buttonid =toggle-pension>退休金转移< / div> - >
< / div>
，那么所有的点击事件可以简化为
$（function（）{
$（'product-toggle-buttons .toggle-button'）。not（'＃toggle-all' ）.addClass（'toggle-inactive'）;
var $ items = $（'。update-item'）;
var $ 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;
}）;
}）;
演示：小提琴
I'm looking for a way to reduce the bloat of my jQuery functions to combine the repetitive functions into one cover all script.
I have a series of category buttons that, on click, filter a list of elements to only show those that correspond to the matching category.
My code works fine however it is repeated 11 times for each 'category' adding some serious bloat to the page.
||| JSFiddle is here |||
A sample of one of the functions is below...
$('#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;
});
The first section of the function shows the divs in the correct category class and hides all other non-matching classes.
The second section 'greys out' all the buttons except the one that is clicked.
The code is repeated for #toggle-greendeal, #toggle-broker, #toggle-cases, #toggle-training, #toggle-collections, #toggle-debt, #toggle-wealth, #toggle-business, #toggle-solar, #toggle-pension, #toggle-welfare.
I know there must be a way but I'm not sure what methods to start with and what technique to use to locate the classes based on which id is clicked.
Can anyone point me in the right direction or give me an easy fix?
It can be simplified using a data-target attribute
<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>
then all the click events can be simplified to
$(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;
});
});
Demo: Fiddle
这篇关于压缩重复的jQuery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
