将相同的事件应用于多个画布，但每个画布做不同的事情 - 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 个画布，并且正在寻找一种方法来将相同的鼠标悬停事件应用于每个画布，并在鼠标悬停的任何地方执行 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 次，因此将它们全部放在一个画布中会崩溃。至于嵌套的鼠标悬停，这是因为我不知道在这些情况下使用“this”。 pause 函数采用布尔值；如果为真，则告诉处理停止绘制，如果为假，则告诉它恢复循环。我采纳了您的建议并通过以下方式解决了问题。

这是解决此问题的方法，仅供将来参考。谢谢 Zeaklous！

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