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

【问题标题】：Mootools options: how to change/overwrite an options property in an event function?Mootools 选项：如何更改/覆盖事件函数中的选项属性？
【发布时间】：2014-10-14 13:06:45
【问题描述】：

我有一个生成一系列动画径向进度条的类构造函数，并且在构造函数之外，elementSize 属性是通过下面显示的选项变量分配的。当径向进度条加载到浏览器中时，每组选项都会为径向进度条分配不同的元素大小。下面显示的四个值来自数组中的第一个索引。

我对 mootools 完全陌生，并且正在努力弄清楚如何从这里将单个 elementSize 属性更改为我的每个径向进度条。我有 2 个带有 onclick 事件的按钮，它们通过一组值向前和向后移动，所以我想做的是调用 elementSize 选项并根据用户是否向前点击（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)
      };

提前致谢。

【问题讨论】：

非常感谢塞尔吉奥的回复。我已经根据您的建议对查询进行了一些编辑，以执行不同的选项值。我并没有真正遵循我应该调用rpbArrayB.rpbBx.elementSize 以更改其值的位置？

标签： javascript mootools element options overwrite

【解决方案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

在您的示例中，类作为数组变量启动，因此您可以像这样更改选项：

rpbArrayB.rpbB1.options.elementSize = 20

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

【讨论】：