JSXGraph:元素数量高或未定义的事件

Question

我想知道是否有一种优雅的方法来处理JSXGraph中大量或未定义数量的元素的事件。举个简单的例子:棋盘上有n个点，最后点击的那个点应该有不同的颜色。对于一些要点，我可以这样做:

const board = JXG.JSXGraph.initBoard('jxgbox', { 
boundingbox: [-5, 5, 5, -5], axis:true
});
var p = [];
p[0] = board.create('point',[1,1],{color:'red'});
p[1] = board.create('point',[-1,1],{color:'red'});
p[2] = board.create('point',[-1,-1],{color:'red'});
p[3] = board.create('point',[1,-1],{color:'red'});
p[0].on('down',
function(){
for (let i=0;i<4;i++){
if (i==0) 
{p[i].setAttribute({color:'blue'})}
else 
{p[i].setAttribute({color:'red'})}
}
}
);
//p[1].on('down', ...); p[2].on('down', ...); ...

但是如果有100个或不定数量的点(例如，点是通过点击按钮创建的)呢?

Answer 1

一种可能性是在数组p上使用JavaScriptforEach循环。下面是一个例子:

const board = JXG.JSXGraph.initBoard('jxgbox', { 
boundingbox: [-5, 5, 5, -5], axis:true
});
var p = [],
last_idx = -1;
p[0] = board.create('point',[1,1],{color:'red'});
p[1] = board.create('point',[-1,1],{color:'red'});
p[2] = board.create('point',[-1,-1],{color:'red'});
p[3] = board.create('point',[1,-1],{color:'red'});
p.forEach(function(el, idx, p){
el.on('down', function() {
if (last_idx >= 0) {
p[last_idx].setAttribute({color:'red'});
}
last_idx = idx;
this.setAttribute({color:'blue'});
});
});

出于效率考虑，我们保留了last_idx中最后点击点的索引。然后只有一个点需要换回红色。请登录https://jsfiddle.net/vc3hLzp0/1/观看现场直播。