Question

我正在使用mootools墙插件，它在我的应用程序中运行良好，但是如果我添加多个（图像）墙只适用于一个墙:::我对脚本的理解不足以添加每个功能或者类似::: 我需要“绑定”下面的代码来说明这样的两个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

如果您阅读Wall's documentation，您会注意到，就像大多数其他类一样，它所采用的第一个参数是元素id。

因此，如果您的初始化代码声明

new Wall("wall", { …

...然后它将应用于id为“wall”的元素。

您可以简单地复制代码并使用“wall”，另一个使用“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的知识，那么这个解决方案可能是最简单的。

Answer 2

也许是这样的：

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

Mootools在多个实例上重用相同的函数，类似于每个函数

2 个答案: