优化Javascript

Question

我正在开发一个主页上有六个相似部分的应用。 我有app工作，但我不得不重复下面的代码块：

每个实例上唯一不同的是id：#grid和id：#close as 这六个部分的每个部分都有所不同。

我尝试通过行：

来清理它

var $grid = $( '#grid4', '#grid2', '#grid3' ..... ),

和

$close = $( '#close', '#close2', '#close3', .....),

之前的内容可防止在浏览器上加载部分。

以下是重复的代码块：

$(function() {

    var $grid = $( '#grid' ),
      $name = $( '.name' ),
      $close = $( '#close' ),
      $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
      stapel = $grid.stapel( {
        onLoad : function() {
          $loader.remove();
        },
        onBeforeOpen : function( pileName ) {
          $name.html( pileName );
        },
        onAfterOpen : function( pileName ) {
          $close.show();
        }
      } );

    $close.on( 'click', function() {
      $close.hide();
      $name.empty();
      stapel.closePile();
    } );

} );

如何改进代码，以便我不必重复上一个块？ （请记住，我需要保留不同的ID，因为我需要每个部分独立行事）

Answer 1

您可以使用class代替id为所有common提供elements

$grid = $( '.grid'),

并且

$close = $( '.close')

您的 html 应该是，

<div class="grid">
    <!-- your html -->
    <div class="close">Close</div>
</div>

现在close是grid class的孩子，您可extract使用find()

Answer 2

您可以使用multiple-selector

var $grid = $( '#grid4, #grid2, #grid3' ..... )

Answer 3

您可以使用变量来组成选择器

 for (var i=0; i<6; i++) {
     $('#grid' + i).....
     // will be #grid0, #grid1, #grid2, etc
 }

Answer 4

创建一个数组并循环遍历它。

var grid= ["#grid4","#grid2","#grid3"];
for (var i = 0; i < grid.length; i++) {
    //The rest of your code goes here goes here
}