2012-06-02 5 views
3

페이지에 선을 그리기위한 새로운 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); 
+2

간단한 코딩 오류를 감지하려면 JSHint/JSLint를 사용해보십시오. 그들은 일반적으로 더 현명한 오류 메시지를 제공하고 더 나은 코딩 방법을 채택하도록합니다. –

+0

@ssg - JSLint가 너무 엄격한 IMO 인 경우 "누락 된 세미콜론"입니다. ': /' –

+1

@Derek JSLint 설정은 조정할 수 있으며 JSHint는 JSLint보다 더 많이 사용됩니다. 그러나 "누락 된 세미콜론"은 JavaScript에서 "자동 세미콜론 삽입"이 오류를 발생시키지 않고 심각한 버그를 일으킬 수 있기 때문에 중요합니다. 나는 그 옵션을 켜 놓을 것을 강력하게 제안한다. –

답변

12

당신은 인라인 (in-line) 기능을 시작합니다. 오류가있는 행 앞에 } 대신 });이 필요합니다.

+1

때로는 그렇게 간단합니다. 나는 그것을 간과했다고 믿을 수 없다. 고마워요! – PitaJ

+0

마지막 줄에''예기치 않은 토큰''이 나온다. – PitaJ

+1

마지막 줄 앞의 줄과 같은 문제가있는 것처럼 보입니다. 'document.ready' 호출을 닫아야합니다. – TLS

관련 문제