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。