缩短这些 javascript (JQuery) 函数答案

【问题标题】：Shorten these javascript (JQuery) functions缩短这些 javascript (JQuery) 函数
【发布时间】：2013-02-07 04:12:34
【问题描述】：

我这里有一长串 jquery 幻灯片函数：

ID 不同，但行为相同。

代码：

/*DataTables*/

$(document).ready( function() {
    $('#all-active-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#all-deactivated-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );


$(document).ready( function() {
    $('#all-ppmps').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );        

$(document).ready( function() {
    $('#agency-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#all-ppmps-by-agency').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#ppmp-form').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );


$(document).ready( function() {
    $('#all-agencies').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#ppmp-uploaded-files').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#agency-types').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

我想知道的是如何让它简短而准确。

我尝试过这样的事情，但没有运气：

$(document).ready( function() {
    $('#all-active-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );

    $('#all-deactivated-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

每当我试图缩短代码时，代码就会失效。

我们将不胜感激任何解决方法。谢谢。

【问题讨论】：

类似于this。不幸的是，原始代码已从该代码中删除。但你可能会在那里找到答案。
似乎是“iditis”的常见情况。使用类，一切都会变得简单得多。

标签： javascript jquery

【解决方案1】：

给他们每个人分配一个班级说mySlider

$(document).ready( function() {
    $('.mySlider').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

【讨论】：

让我试试这个。谢谢
我是个新手。 Waaa 我忘记了类比 ID 好一些。感谢您帮助我记住这些事情。

【解决方案2】：

如果你的插件支持多个选择器，试试这个：

$(document).ready(function () {
    $('#all-active-users, #all-deactivated-users, #all-ppmps, #agency-users, #all-ppmps-by-agency, #ppmp-form, #all-agencies, #ppmp-uploaded-files, #agency-types')
    .dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    });
});

您也可以尝试使用each()：

$(document).ready(function () {
    $('#all-active-users, #all-deactivated-users, #all-ppmps, #agency-users, #all-ppmps-by-agency, #ppmp-form, #all-agencies, #ppmp-uploaded-files, #agency-types')
    .each(function () {
        $(this).dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
    });
});

【讨论】：

【解决方案3】：

有一条规则可以应用于所有编程。不要重复自己。

注意你所有的方法是如何做同样的事情的？所以你想要做的就是封装它，然后简单地为每个更改调用它。

创建一个这样的函数：

var doSomething = function(selector){

    $(selector).dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );

};

现在我们有了一个函数，我们可以像这样调用任何我们喜欢的选择器：

$(document).ready( function() {

var doSomething = function(selector){

    $(selector).dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );

};

    doSomething('#all-active-users');
    doSomething('#all-deactivated-users');

} );

几乎就在那里，但我们仍然通过每次调用它来重复自己。那么为什么不这样做呢：

$.each(['#all-active-users', '#all-deactivated-users'], function(index, value) { 
  doSomething(value);
});

【讨论】：