페이지에 선을 그리기위한 새로운 jQuery 플러그인을 만들고 있습니다. 문제는 내가 스크립트를 실행할 때, 크롬에 말한다, 여기에 무슨 일이 일어나고 있는지 알아낼 수 있다는 것입니다 :jquery에서 "Uncaught SyntaxError : Unexpected identifier"오류가 발생했습니다.
"Uncaught SyntaxError: Unexpected identifier"
을 마지막 줄 (읽는 하나 $.line();
을)에 8 일.
전체 코드 : $(document).on('mousemove', function(e) {
를하고 그 후에 문을 완료하지 :
(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', {x: coords[0], 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);
간단한 코딩 오류를 감지하려면 JSHint/JSLint를 사용해보십시오. 그들은 일반적으로 더 현명한 오류 메시지를 제공하고 더 나은 코딩 방법을 채택하도록합니다. –
@ssg - JSLint가 너무 엄격한 IMO 인 경우 "누락 된 세미콜론"입니다. ': /' –
@Derek JSLint 설정은 조정할 수 있으며 JSHint는 JSLint보다 더 많이 사용됩니다. 그러나 "누락 된 세미콜론"은 JavaScript에서 "자동 세미콜론 삽입"이 오류를 발생시키지 않고 심각한 버그를 일으킬 수 있기 때문에 중요합니다. 나는 그 옵션을 켜 놓을 것을 강력하게 제안한다. –