作为一名桌面开发人员,我对Javascript还是很陌生,所以我经常遇到使我困惑的问题。我正在处理RaphaelJS形状上的点击事件,最初我是通过私有方法设置对象的状态和动画的:
innershape.node.onclick = function () {
if (scope.state === 0) {
_setState(1);
} else {
_setState(0);
}
};
function _setState(state) {
scope.state = state;
if (scope.state === 0) {
innershape.animate({ fill: "#00FF19" }, 500);
} else {
innershape.animate({ fill: "#C05219" }, 500);
}
}
这按预期运行。然后,我决定添加一个外部函数,该函数将遍历所有对象并取消选择(并因此使其反向动画)所有其他形状。结果可以在以下jsfiddle中看到:http : //jsfiddle.net/txj4zasn/4/
该函数已正确调用,并且animate()函数显然已执行,但是可见的动画从未出现,并且颜色也从未改变。我怀疑这是Java语言的非常基本的知识,我只是不了解。有人可以向我解释为什么会这样吗?
不清楚要实现什么(除了使动画正常工作之外),因此我认为最初的解决方案不好,但是我会在此基础上进行扩展。
该问题看起来有点像您要组合两个不同的元素,即功能范围和对象变量。
一个快速的解决方案是包括...
this.id = 1;
var id = this.id; // so id now a closure to the later function
作为updateSelected(id); 这里的id在另一个函数中,所以我们不能使用'this.id'。但是后来您要检查z [i] .id,因此也需要对其进行定义。
但是,这一切都显得笨拙,容易出错,并且很难阅读。那么第一个问题是您需要物体吗?您可以将信息存储在Raph元素的“数据”部分中,该部分已经是一个对象。
这是一个我将如何编写它的示例,我意识到这可能不合适,因为它可能是一个较大的项目的一部分,该项目需要对象中的其他元素,但它可能会给出一些想法。
function updateSelected( el ) {
if( el.data('innerstate') == 1 ) {
el.animate({ fill: "#00FF19" }, 500);
el.data('innerstate',0)
} else {
el.animate({ fill: "#C05219" }, 500);
el.data('innerstate',1);
}
}
function addElement() {
var innershape = paper.rect(100,100,100, 100);
innershape.attr({fill: "#00FF19" });
innershape.data('innerstate', 0);
innershape.click( function () {
updateSelected( innershape )
} );
};
addElement();
这段代码我几乎可以立即阅读,并且知道如何以及是否可以使用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句