我的javascript代碼中未捕獲的語法錯誤

Question

我的javascript代碼中出現「未捕獲的語法錯誤：意外標識符」錯誤。這段代碼基本上只是一個教程的1到1個副本，我修改了它以適合我的html文件。在「Create StickyNote」函數的第86行中發生錯誤。 這裏去代碼：

(function ($, $S) { 
//$ jQuery 
//$S window.localStorage 
//Variables Declaration 
var $board = $('#board'), 
    //Board where the stickyNotes are stuck 
    stickyNoteClass, //Singleton Object containing the Functions to work with the LocalStorage 
    len = 0, 
    //Length of Objects in the LocalStorage 
    currentNotes = '', 
    //Storage the html construction of the stickyNotes 
    o; //Actual stickyNoteClass data in the localStorage 



//Manage the stickyNotes in the Local Storage 
//Each stickyNote is saved in the localStorage as an Object 
stickyNoteClass = { 
    add: function (obj) { 
     obj.id = $S.length; 
     $S.setItem(obj.id, JSON.stringify(obj)); 
    }, 

    retrive: function (id) { 
     return JSON.parse($S.getItem(id)); 
    }, 

    remove: function (id) { 
     $S.removeItem(id); 
    }, 

    removeAll: function() { 
     $S.clear(); 
    } 

}; 

//If any stickyNote exists, Create it/them 
len = $S.length; 
if (len) { 
    for (var i = 0; i < len; i++) { 
     //Create all stickyNotes saved in localStorage 
     var key = $S.key(i); 
     o = stickyNoteClass.retrive(key); 
     currentNotes += '<div class="stickyNote"'; 
     currentNotes += ' style="left:' + o.left; 
     currentNotes += 'px; top:' + o.top; 
     //data-key is the attribute to know what item delete in the localStorage 
     currentNotes += 'px"><div class="toolbar"><span class="delete" data-key="' + key; 
     currentNotes += '">x</span></div><div contenteditable="true" class="editable">'; 
     currentNotes += o.text; 
     currentNotes += '</div></div>'; 
    } 

    //Append all the stickyNotes to the board 
    $board.html(currentNotes); 
} 

/*Dont need to implement this one, as it is already implemented in the html index file 
--------------------------------------------------------------------------------------- 
--------------------------------------------------------------------------------------- 
//When the document is ready, make all stickyNotes Draggable 
$(document).ready(function() { 
    $(".stickyNote").draggable({ 
     cancel: '.editable', 
     "zIndex": 3000, 
     "stack" : '.stickyNote' 
    }); 
});*/ 

//Remove stickyNoteClass 
$('span.delete').live('click', function() { 
    if (confirm('Are you sure you want to delete this Note?')) { 
     var $this = $(this); 
     //data-key is the attribute to know what item delete in the localStorage 
     stickyNote.remove($this.attr('data-key')); 
     $this.closest('.stickyNote').fadeOut('slow', function() { 
      $(this).remove(); 
     }); 
    } 
}); 

//Create stickyNote 
$('#new stickyNote').click(function() { 
    $board.append('<div class="stickyNote" style="left:20px;top:70px"> 
      <span class="delete" title="Close">x</span> 
      <h1>Drag Me</h1> 
      <p class="editable">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p> 
</div>'); 

    /*Dont need to do this, as the draggable is implemented in the html file for all 
    divs which are placed within the #board. 
    ------------------------------------------------------------------------------------ 
    ------------------------------------------------------------------------------------ 
    $(".stickyNote").draggable({ 
     cancel: '.editable' 
    });*/ 
}); 

//Save all the stickyNotes when the user leaves the page 
window.onbeforeunload = function() { 
    //Clean the localStorage 
    stickyNoteClass.removeAll(); 
    //Then insert each stickyNote into the LocalStorage 
    //Saving their position on the page, in order to position them when the page is loaded again 
    $('.stickyNote').each(function() { 
     var $this = $(this); 
     stickyNoteClass.add({ 
      top: parseInt($this.position().top), 
      left: parseInt($this.position().left), 
      text: $this.children('.editable').text() 
     }); 
    }); 
} 
})(jQuery, window.localStorage); 

Answer 1

由於@FelixKling指出，一個多行字符串是不允許你有它的方式。更改此：

$('#new stickyNote').click(function() { 
    $board.append('<div class="stickyNote" style="left:20px;top:70px"> 
      <span class="delete" title="Close">x</span> 
      <h1>Drag Me</h1> 
      <p class="editable">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p> 
</div>'); 

    /*Dont need to do this, as the draggable is implemented in the html file for all 
    divs which are placed within the #board. 
    ------------------------------------------------------------------------------------ 
    ------------------------------------------------------------------------------------ 
    $(".stickyNote").draggable({ 
     cancel: '.editable' 
    });*/ 
}); 

這樣：

$board.append('<div class="stickyNote" style="left:20px;top:70px">' + 
      '<span class="delete" title="Close">x</span>' + 
      '<h1>Drag Me</h1>' + 
      '<p class="editable">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>' + 
      '</div>');