压缩重复的jQuery函数

时间:2014-01-29 09:49:22

标签: javascript jquery html css refactoring

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

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

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

||| JSFiddle is here |||

其中一个功能的样本如下......

$('#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来定位类的技术。

有人能指出我正确的方向还是给我一个简单的解决方法?

3 个答案:

答案 0 :(得分:2)

可以使用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;

    });
});

演示:Fiddle

答案 1 :(得分:1)

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

$('#toggle-greendeal').click(function(e) {
    $('[class^="update"]').hide(200);
    $('.update-greendeal').show(200);

    $('[id^="toggle"]').addClass('toggle-inactive');
    $(this).removeClass('toggle-inactive');

    e.preventDefault();
});

答案 2 :(得分:0)

您可以使用以下内容:

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

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

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

addClass(“toggle-inactive”);

相同