0

我正在开发一个主页上有六个类似部分的应用程序。我的应用程序正在运行，但我不得不重复下面的代码块：

每个实例唯一不同的是 id:#grid和 id:#close因为这个 id 在六个部分中的每一个都不同。

我尝试通过以下方式来清理它：

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，因为我需要每个部分独立运行）

4

4 回答 4

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()

于 2013-10-08T04:21:59.703 回答
0

您可以使用多重选择器

var $grid = $( '#grid4, #grid2, #grid3' ..... )
于 2013-10-08T04:20:58.803 回答
0

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

var grid= ["#grid4","#grid2","#grid3"];
for (var i = 0; i < grid.length; i++) {
    //The rest of your code goes here goes here
}
于 2013-10-08T04:27:28.050 回答
0

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

 for (var i=0; i<6; i++) {
     $('#grid' + i).....
     // will be #grid0, #grid1, #grid2, etc
 }
于 2013-10-08T04:25:01.117 回答