努力与鼠标事件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的

回答

相关问题