我正在制作一个新的jQuery插件,用于在页面上绘制线条.
问题是我无法弄清楚这里发生了什么,当我运行脚本时,在Chrome中它说:
问题是我无法弄清楚这里发生了什么,当我运行脚本时,在Chrome中它说:
"Uncaught SyntaxError: Unexpected identifier"
在第8行到最后一行(读取:$.line();).
整个代码:
(function( $) { $.fn.line = function(coordinates) { var bothpoints; $.fn.line.draw = function() { var lineColor = $('#lineRegion').attr('lineColor'); if (!lineColor) { var colors = ['black','blue','green','red','yellow','purple','magenta','cyan']; $('img.line').each(function () { colors.splice(colors.indexOf($(this).css('color')),1); }); var lineColor = colors[0]; } var data = $.line.data(),width = Math.abs(data[0] - data[2]),height = Math.abs(data[1] - data[3]); if (data[0] >> data[2]) { var lineleft = data[2]; } else { var lineleft = data[0]; } if (data[1] >> data[3]) { var linetop = data[1]; } else { var linetop = data[3]; } $('body').append('<img class="line" src="/lines/line-'+lineColor+'.png" style="position:absolute;top:'+linetop+';left:'+lineleft+';width:'+width+'px;height:'+height+'px;color:'+lineColor+';"/>'); } $.fn.line.data = function(coords) { if (coords.length == 2) { if ( ! $('#line').data('point1') ) { $('#line').data('point1',{x: coords[0],y: coords[1]}); bothpoints = false; } else { $('#line').data('point2',y: coords[1]}); bothpoints = true; } $.line.draw(); } else if (coords == 1) { $('#line').data('point1',false); bothpoints = false; } else if (coords == 2) { $('#line').data('point2',false); bothpoints = false; } else if (!coords) { return [$('#line').data('point1').x,$('#line').data('point1').y,$('#line').data('point2').x,$('#line').data('point2').y]; } } $.fn.line.point = function() { if (!($.line.data().length == 4)) { var _posY = posy,_posX = posx; $('body').append('<div class="point" style="position:absolute; top:' + _posY + 'px; left:' + _posX + 'px;"></div>'); $.line.data([_posX,_posY]); if (bothpoints == true) { $.line.draw(); } } } $.fn.line.unpoint = function() { this.hide('fast'); if ($.line.data()[0] == this.offset()['left'] && $.line.data[1] == this.offset()['top']) { $.line.data(1); } else { $.line.data(2); } $.line.erase(); } $.fn.line.erase = function(total) { if (total == true) { $('img.line').hide('fast'); $('div.point').hide('fast'); $.line.data(1); $.line.data(2); } else { $('img.line').hide('fast'); } } if ( coordinates.length == 4) { $.line.data([coordinates[0],coordinates[1]]); $.line.data([coordinates[2],coordinates[3]]); $.line.draw(); } }; var posx,posy; $(document).ready(function(){ $(document).on('mousemove',function(e) { if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } } $.line(); $('head').append('<Meta id="line" />'); $('#lineRegion').click( $.line.point() ); $('.point').click( $.line.unpoint() ); $('.lineEraser').click( $.line.erase(true) ); } })( jQuery );