loops - 複数の div ループで mousemove を回転させる

Question

複数の div (三角形) をマウス位置に回転させようとしています。1 つのクラスのみを使用するとすべて同じように移動するため、これらをループする必要があります。問題は、次の行で三角形を取得できないため、非常に遅いことです。

$('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $(".triangle'+i+'"));})})

一度にすべてのマウス移動をバインドする方法、またはそれを修正する方法を誰かが教えてくれることを願っています。前もって感謝します

            for(i=0;i<28; i++){
                $('#stage').append('<div class="triangle'+i+'">')
                    tri()
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle0'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle1'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle2'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle3'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle4'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle5'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle6'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle7'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle8'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle9'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle10'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle11'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle12'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle13'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle14'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle15'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle16'));})})
                $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle17'));})})


                }


             }
            else if ($('.triangle1').length>=1) {
                reset()

            }

  function rotateOnMouse(e, pw) {
  var offset = pw.offset();
  var center_x = (offset.left) + ($(pw).width() / 2);
  var center_y = (offset.top) + ($(pw).height() / 2);
  var mouse_x = e.pageX;
  var mouse_y = e.pageY;
  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
  var degree = (radians * (180 / Math.PI) * -1) +10;

   $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
   $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
   $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
   $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
 }

 });  

 function tri(){

        $('.triangle'+ i).css({
                'float':'left',
                'left': 50 +'px',
                'top': 50 + 'px',
                'width': 0+'px',
                'height': 0+'px',

                'margin': 50 + 'px',
                'cursor':'pointer',
                'border-left': 40 + 'px solid transparent' ,
                'border-right': 40 + 'px solid transparent' ,
                'border-top':80 + 'px solid black' 
            })
        $('#stage').mouseup(function() {
        $('#stage').unbind('mousemove')

            })
        }