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 上使用JavaScript forEach 循环。这是一个例子：

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/ 观看直播。