将同一事件应用于多个画布，但每个画布执行不同的操作-Jquery

Question

我基本上有两个这样的画布：

<canvas id="canvas1" class="canvases" ></canvas>
<canvas id="canvas2" class="canvases" ></canvas>

因为它们运行的是Processing.js，而且可能会变得很重，所以我对jQuery中的两个按钮都应用了mouseover和mouseout事件，如下所示：

num_canvases = 2;
canvasArray = [];
for (i = 0, i < num_canvases, i++) {
    canvasArray.push(Processing.getInstanceById('canvas'+i);
}
$('#canvas1').mouseover(function () {
    if (!force_play_all) {
        canvasArray[0].pause_or_resume(false);
    };
});
$('#canvas2').mouseover(function(){
    if (!force_play_all) {
        canvasArray[1].pause_or_resume(false);
    };
});

等等。。。

但现在我正在扩展到20个画布，并正在寻找一种方法，将相同的mouseover事件应用于每个画布，并在我的鼠标所在的位置执行pause_or_resume。我不能把它应用到每节课上，否则它们都会断断续续。我在想这样的事情，但它仍然不起作用。想法？：

$('.canvases').mouseover(function () {
        for (var i = 0; i <= numVars-1; i++) {
            var name_holder = '#canvas'+(i+1);
                $(name_holder).mouseover(function () {
                    canvas_instance = Processing.getInstanceById('canvas'+i);
                    if (pause_boolean) {
                        console.log(name_holder);
                        console.log(canvas_instance);
                        canvas_instance.pause_or_resume(pause_boolean);
                    };
                });
            };
        });

Answer 1

是的，所以我使用了20个画布，因为处理每秒重绘整个实例60次，所以把它们都放在一个画布中会崩溃。至于嵌套的mouseover，那是因为我不知道在这些情况下使用"this"。pause函数采用布尔值；如果是真的，那么它告诉处理停止绘制，如果是假的，它告诉它恢复循环。我采纳了你的建议，并通过以下操作解决了问题。

以下是修复的方法，仅供将来参考。谢谢Zeaklus！

$("[id^='canvas']").mouseover(function () {
    if (!force_play_all) {
        canvasArray[parseInt(this.id.replace('canvas',''))-1].pause_or_resume(false);
    };
});