Mootools的重复使用相同的功能上的多个实例的东西，如各功能

Question

我使用MooTools的墙插件，它在我的应用程序运行良好，但是如果我添加多个（图）墙壁它仅适用于一面墙:::我的脚本的理解是不够好，添加每个功能或类似::: 我要“绑定”下面的代码说2周的div像这样:::

我的第一壁：

<div id="viewport"> 
<div id="wall"> 

第二壁：

<div id="viewport"> 
<div id="wall_02"> 

任何援助将不胜感激。

var wallIMAGES = new Wall("wall", { 

        "width": scArray[1], 
        "height": scArray[1], 

        callOnUpdate: function(items){ 
         items.each(function(e, i){ 
          var el = wall[counterFluid]; 
          if (el) { 
           var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el)); 
            a.inject(e.node).set("opacity", 0).fade("in"); 
            e.node.store("tubeObject", el); 
          } 
          counterFluid++; 
          // Reset counter 
          if(counterFluid >= scArray[10].length) counterFluid = 0; 
         }) 
        } 

    }); 
     wallIMAGES.initWall(); 

Answer 1

也许是这样的：

var my_wall_ids = ['wall', 'wall_02']; 
var myWalls = []; 
var baseWallOptions = { 
     "width": scArray[1], 
     "height": scArray[1], 
     callOnUpdate: function(items){ 
      items.each(function(e, i){ 
       var el = wall[counterFluid]; 
       if (el) { 
        var a = new Element("img[width="+scArray[1]+"][height="+scArray[1]+"][src={thumb}]".substitute(el)); 
        a.inject(e.node).set("opacity", 0).fade("in"); 
        e.node.store("tubeObject", el); 
       } 
       counterFluid++; 
       // Reset counter 
       if(counterFluid >= scArray[10].length) {counterFluid = 0;} 
      }); // end items.each 
     } 
} 
for (var i=0;i<my_wall_ids.length;i++){ 
    var id = my_wall_ids[i]; 
    var wallOptions = baseWallOptions; 
    // if your customization was something like changing 
    // the height , but only on the 'wall' element 
    if (id === 'wall') { 
     wallOptions.height = 400; 
    } 
    myWalls[i] = new Wall(id, wallOptions); 
    myWalls[i].initWall(); 
} 

Answer 2

如果你读Wall's documentation，你会发现，就像大多数其他的类，它会将第一个参数是一个元素id。

所以，如果你的初始化代码规定

new Wall("wall", { … 

...那么它将被应用于具有id为“墙”的元素。

你可以简单地复制你的代码，并使用一个与“墙”，另一个为“wall_02”。但是，这将是不好的做法。事实上，如果你后来想改变一些选择，你必须在两个不同的块中完成，而且它们可能会失去同步。

如果您唯一的区别在于目标id，并且要共享选项，只需将选项对象（第二个参数为Wall类）存储在变量中并使用它两次！那就是：

var wallOptions = { width: … }; 

var wallImages = new Wall("wall", wallOptions), 
    wallImages2 = new Wall("wall_02", wallOptions); 

wallImages.initWall(); 
wallImages2.initWall(); 

这可能是更好的函数嵌入initalization，但这种解决方案可能是最简单的，如果你只是想有两个Wall情况下，无需学习更多关于JS。