努力與鼠標事件jQuery的

這裏動態選框工具是我的代碼：努力與鼠標事件jQuery的

$.fn.createBox = function(id) { 
     var ctr = 0; 

     $(id).css({ 
      cursor:'crosshair' 
     }); 

     $(id).click(function(e) { 
      if (ctr == 0) { 
       var clickLocX = e.pageX; 
       var clickLocY = e.pageY; 
       $('<div>').attr({ 
        'class':'newBox' 
       }) 
       .css({ 
        top:clickLocY, 
        left:clickLocX 
       }) 
       .appendTo(id); 

       ctr = 1; 

       if (ctr == 1) { 
        $(id).mousemove(function(e){ 
         var XpageCoord = e.pageX; 
         var YpageCoord = e.pageY; 
          window.Xloc = XpageCoord; 
          window.Yloc = YpageCoord; 
         var boxOffset = $('.newBox').offset(); 
         var boxHeight = YpageCoord - boxOffset.top; 
         var boxWidth = XpageCoord - boxOffset.left; 
         $('.newBox').css({ 
          height:boxHeight + 'px', 
          width:boxWidth + 'px' 
         }); 
         ctr = 2; 
        }); 
       } 
      } 
      else if (ctr == 2) { 
       $('.newBox').remove(); 
       $('#work_area').css({ 
        cursor: 'default' 
       }); 
      } 
      else { 
       $.noop(); 
      } 
     }); 
    }

這樣做的小提琴也正在於此：http://jsfiddle.net/HYQp4/1/

這個代碼不產生框（我已經設置了css類爲newBox）。任何人都可以告訴我這裏缺少什麼嗎？

來源

2011-12-14 dopatraman

你爲什麼在'id'參數傳遞，當你擴展'jQuery.fn'原型？這是否不符合創建新的jQuery包裝函數的目的？ –

我問，因爲我沒有看到你在'createBox'代碼中的任何地方使用'this'（如果我錯了，請糾正我）。你想要擴展'jQuery.fn'而不是簡單''jQuery'的原因是你想要創建一些作用於jQuery包裝對象的函數。也就是說，你希望能夠說'$（'＃foo'）。createBox（）'並讓'createBox'與'$（'＃foo'）'對象一起工作，而不必選擇一些東西主要針對某些事情完全不同。 –

@ RichardNeilIlagan - 這是一個很好的觀點......我最初的計劃是將'createBox'附加到一個元素上並讓它對另一個元素起作用。我沒有意識到，只要改變代碼的結構，我就可以使用'this'來處理任何我需要的元素。感謝您的建議。 – dopatraman

從我可以告訴，你永遠不會引用2個div元素的id。使用jQuery（「＃clickMe」）引用click me框和jQuery（「＃work」）來引用繪圖區域。

見http://jsfiddle.net/HYQp4/3/如何啓動createBox功能

來源

2011-12-14 00:52:30 dtyler

努力與鼠標事件jQuery的

回答

相關問題