JSXGraph：大量或未定义元素的事件

如何解决JSXGraph：大量或未定义元素的事件

我想知道是否有一种优雅的方法来处理 JSXGraph 中大量或未定义元素的事件。一个简单的例子：棋盘上有n个点，最后被点击的点应该有不同的颜色。对于几点，我可以执行以下操作：

const board = JXG.JSXGraph.initBoard('jxgBox',{ 
    boundingBox: [-5,5,-5],axis:true
});

var p = [];
p[0] = board.create('point',[1,1],{color:'red'});
p[1] = board.create('point',[-1,{color:'red'});
p[2] = board.create('point',-1],{color:'red'});
p[3] = board.create('point',{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 个或不确定数量的点（例如通过单击按钮创建点）怎么办？

解决方法

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

const board = JXG.JSXGraph.initBoard('jxgbox',{ 
  boundingbox: [-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,{color:'red'});
p[2] = board.create('point',-1],{color:'red'});
p[3] = board.create('point',{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/ 现场观看。