优化Javascript

我正在开发一个应用程序，主页上有六个类似的部分。 我让应用程序正常工作，但我必须重复下面的代码块：

每个实例上唯一不同的是id:

#grid

和id:

#close

作为 这六个部分的ID各不相同

我试着通过以下方式来解决这个问题：

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

及

上一节阻止在浏览器上加载节

下面是正在重复的代码块：

$(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();
    } );

} );

$（函数（）{
var$grid=$（“#grid”），
$name=$（'.name'），
$close=$（“#close”），
$loader=$（'Loading…'）。insertBefore（$grid），
stapel=$grid.stapel（{
onLoad:function（）{
$loader.remove（）；
},
onBeforeOpen:函数（pileName）{
$name.html（pileName）；
},
onAfterOpen:函数（pileName）{
$close.show（）；
}
} );
$close.on（'click'，function（）{
$close.hide（）；
$name.empty（）；
stapel.closePile（）；
} );
} );

---

如何改进代码，使我不必重复前面的代码块？（请记住，我确实需要保留不同的ID，因为我需要每个部分独立运行）

您可以使用

---

您可以使用

class

而不是

id

为所有

元素

等设置

公共

$grid = $( '.grid'),

及

你的html应该是

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

接近

---

现在

close

是

网格类的子类

您可以

提取它，通过使用您可以使用变量组成选择器

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

for（var i=0；i创建一个数组并在其中循环

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

var grid=[“#grid4”、“#grid2”、“#grid3”]；
对于（变量i=0；i
我只是尝试一下。部分仍然没有加载到浏览器上：/Irm，请注意，函数调用中只有一个参数。在您的代码中，有几个参数用逗号分隔，我认为这是不正确的。@RobG认为，考虑到倾斜和解释，这是显而易见的。我将编辑并添加问题。您可以撤消否决吗？-不是我的否决票，谢谢你添加了一个问题。这个主题通常只是一个吸引注意力的话题，你应该尽量在实际帖子中明确你想要达到的目标（正如你所做的那样）。“优化”对不同的人来说意味着不同的事情（更快、更少的代码、更易于维护等）。我给你+1来补偿你的麻烦。：-@RobG我明白了。我会说得更具体一些。谢谢（：您应该基于一个元素创建一个插件，然后从插件中的该元素访问每个close/grid（&html中的use类）如果你显示你的html结构我需要每个部分独立运行，因此我需要不同的id使用类没有这样做，只有第一部分加载。这不会使代码同时为所有id运行吗？它应该为用户选择的特定部分独立运行。
<div class="grid">
    <!-- your html -->
    <div class="close">Close</div>
</div>

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

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