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

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

我对mootools完全陌生,并且正在努力找出如何从此处将各个elementSize属性更改为我的每个径向进度条.我有2个带有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)
      };

提前致谢.

解决方法:

在Mootools中,通常将选项放入选项对象(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

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

标签：overwrite,mootools,element,options,javascript
来源： https://codeday.me/bug/20191121/2051129.html