Question

我有一个类构造函数，它生成一系列动画径向进度条，在构造函数之外，elementSize属性是通过下面显示的选项变量赋值的。每组选项在放入浏览器时为径向进度条指定不同的元素大小。下面显示的四个值来自数组中的第一个索引。

我是mootools的新手，我正在努力弄清楚如何将各个elementSize属性从这里更改为每个径向进度条。我有两个带有onclick事件的按钮，这些事件在数组中向前和向后前进，所以我想要做的是调用elementSize选项并根据用户是否向前点击（x ++）或更改x的值向后（x--）。

有没有办法在我的按钮功能中执行此操作？或者它是否需要通过其他方式包含在我的代码中？

 var RPBoptionsB1 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd', 
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][0]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

var RPBoptionsB2 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd', 
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][1]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

var RPBoptionsB3 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd',
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][2]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

var RPBoptionsB4 = {
    backgroundColor: '#fff',
    borderColor: '#1895cd', 
    borderWidth: '10',
    elementSize: 90+(arrayStatsB[x][3]/45.775),
    fontColor: '#5f6f7e',
    overlayColor: '#fff',
    animateText: true 
};

//-----------------------------------------

      var rpbArrayB = {
          rpbB1: new RadialProgressBar($('rpbB1'), RPBoptionsB),
          rpbB2: new RadialProgressBar($('rpbB2'), RPBoptionsB),
          rpbB3: new RadialProgressBar($('rpbB3'), RPBoptionsB),
          rpbB4: new RadialProgressBar($('rpbB4'), RPBoptionsB)
      };

提前致谢。

Answer 1

在Mootools中，将选项放在options对象（http://mootools.net/docs/core/Class/Class.Extras#Options:setOptions）中是很常见的。

举个例子：

var MyClass = new Class({
    Implements: Options,

    options: {
        elementSize: 10
    },

    initialize: function(options){
        this.setOptions(options);
    }
});

var instance1 = new MyClass();
console.log(instance1.options.elementSize); // Returns 10

instance1.options.elementSize = 20;
console.log(instance1.options.elementSize); // Returns 20

var instance2 = new MyClass({
    elementSize: 15
});
console.log(instance2.options.elementSize); // Returns 15

在您的示例中，类是作为Array变量启动的，因此您可以更改选项：

rpbArrayB.rpbB1.options.elementSize = 20

请注意，这可能并不总是具有所需的效果。如果类在初始化时采用选项并且之后不再使用它们，则更改选项将对初始化类没有影响。在这种情况下，您必须重新初始化该类。

Mootools选项：如何更改/覆盖事件函数中的options属性？

1 个答案: