여러 캔버스에 동일한 이벤트를 적용하지만, 캔버스에 따라 다른 일을 JQuery와

Question

나는 기본적으로 두 캔버스과 같이 있습니다

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

그리고 그들은 Processing.js를 실행하고 무거운 얻을 수 있기 때문에, 나는 마우스 오버를 적용 오버와 너무 같은 jQuery를 모두 버튼에 이벤트 :

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 번 다시 그립니다 원인이 사용하고 있습니다. 중첩 된 마우스 오버에 관해서는이 경우에 '이'를 사용하는 것에 대해 몰랐기 때문에 발생했습니다. 일시 정지 함수는 부울을 취합니다. true이면 그리기를 중지하도록 처리하도록 지시하고, false이면 루프를 다시 시작하도록 지시합니다. 나는 당신의 충고를 받아 다음과 같이함으로써 해결했습니다.

향후 참조를 위해 수정 된 방법입니다. Zeaklous에 감사드립니다!

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