优化Javascript

Question

我正在使用主页上的六个类似部分的应用程序。 我的应用程序工作，但我不得不重复下面的代码块：

唯一的每个实例不同的是ID：#grid和ID：作为 这种IDS在每个六个部分的变化。

我试着使用通过线清理它：

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

您可以使用multiple-selector

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

Answer 2

可以使用class代替id使common所有elements像

$grid = $('.grid'), 

而且

$close = $('.close') 

你HTML应该是这样的，

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

现在close是grid class的孩子，你可以通过使用find()

Answer 3

您可以使用变量来弥补选择

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

Answer 4

extract它

创建一个数组并在其中循环。

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