0

我这里有一长串 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"
    } );
} );

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

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

4

3 回答 3

3

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

$(document).ready( function() {
    $('.mySlider').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );
于 2013-02-07T04:15:44.113 回答
3

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

$(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"
        });
    });
});
于 2013-02-07T04:17:42.663 回答
2

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

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

做一个这样的功能：

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);
});
于 2013-02-07T04:20:00.030 回答