2014-11-03 116 views
0

我正在添加三個按鈕並使用單個類進行管理。但我得到這個未定義的錯誤。定義類後的未定義對象

var jQuery = jQuery.noConflict(); 
jQuery(function(){ 

    var sampTool = new loadToolBar('pageContent'); 

    sampTool.addImgBtn("fontMore","img/plus.png"); // Uncaught TypeError: undefined is not a function 
    sampTool.addImgBtn("fontLess","img/minus.png"); 
    sampTool.addImgBtn("printPage","img/printer.png"); 


    jQuery('#fontMore').click(function(){ 
     sampTool.zoom('pageContent','+=2px'); 
    }); 


    jQuery('#fontLess').click(function(){ 
     sampTool.zoom('pageContent','-=2px'); 

    }); 

    function loadToolBar(fileBody) // Class definition 
    { 
     var toolBar = document.createElement("div"); 
     toolBar.className = "oasys-toolbar"; 
     toolBar.id = "oasys-toolbar"; 
     jQuery(toolBar).insertBefore("#"+fileBody); 

    } 

    /*--------------------- Prototypes------------------------*/ 

    loadToolBar.prototype.addImgBtn = function(itemID,itemPath) 
    { 

     var newIcon = document.createElement("img"); 
     newIcon.id=itemID; 
     newIcon.src = itemPath; 
     newIcon.className = "oasys-toolbar-item oasys-toolbar-btn"; 
     document.getElementById('oasys-toolbar').appendChild(newIcon); 
    } 

    loadToolBar.prototype.zoom = function(containerID,size) 
    { 
     jQuery("#"+containerID+" *").css("font-size",size); 
    } 



}); 

在此先感謝

+0

嘗試將類定義和原型移到onload函數之外。 – Xlander 2014-11-03 07:52:43

+1

你可以用你的特定問題創建[fiddle](http://fiddle.jshell.net/)嗎?它會更容易幫助:) – Kutyel 2014-11-03 07:55:03

+0

我想指出與實際答案無關,您應該使用PascalCase命名您的構造函數 - 許多lint工具將查找PascalCase函數並嘗試應用一些約束,就好像它們一樣'重新構造函數(例如檢查你是否沒有新的稱呼) – Sacho 2014-11-03 08:10:24

回答

2

當你打電話loadToolBar.addImgBtn()的功能可按,addImgBtn,尚未分配到loadToolBar.prototype

你需要運行你的類聲明然後執行它。我會這樣寫:

var jQuery = jQuery.noConflict(); 

function loadToolBar(fileBody) // Class definition 
{ 
    var toolBar = document.createElement("div"); 
    toolBar.className = "oasys-toolbar"; 
    toolBar.id = "oasys-toolbar"; 
    jQuery(toolBar).insertBefore("#" + fileBody); 

} 

/*--------------------- Prototypes------------------------*/ 

loadToolBar.prototype.addImgBtn = function(itemID, itemPath) { 

    var newIcon = document.createElement("img"); 
    newIcon.id = itemID; 
    newIcon.src = itemPath; 
    newIcon.className = "oasys-toolbar-item oasys-toolbar-btn"; 
    document.getElementById('oasys-toolbar').appendChild(newIcon); 
}; 

loadToolBar.prototype.zoom = function(containerID, size) { 
    jQuery("#" + containerID + " *").css("font-size", size); 
}; 

jQuery(function() { 
    // This function runs after `document.ready`. But your constrator don't need to declare after dom ready 

    var sampTool = new loadToolBar('pageContent'); 
    sampTool.addImgBtn("fontMore", "img/plus.png"); // Uncaught TypeError: undefined is not a function 
    sampTool.addImgBtn("fontLess", "img/minus.png"); 
    sampTool.addImgBtn("printPage", "img/printer.png"); 

    jQuery('#fontMore').click(function() { 
    sampTool.zoom('pageContent', '+=2px'); 
    }); 

    jQuery('#fontLess').click(function() { 
    sampTool.zoom('pageContent', '-=2px'); 

    }); 
}); 
0

由於Xlander寫道嘗試移動類定義和原型的onload功能之外,或只是把它們在你的代碼嘗試使用它們之前。

2

當您在代碼中創建對象時,函數未定義。試着重新排序這樣,

var jQuery = jQuery.noConflict(); 
jQuery(function(){ 

    function loadToolBar(fileBody) // Class definition 
    { 
     var toolBar = document.createElement("div"); 
     toolBar.className = "oasys-toolbar"; 
     toolBar.id = "oasys-toolbar"; 
     jQuery(toolBar).insertBefore("#"+fileBody); 

    } 

    /*--------------------- Prototypes------------------------*/ 

    loadToolBar.prototype.addImgBtn = function(itemID,itemPath) 
    { 

     var newIcon = document.createElement("img"); 
     newIcon.id=itemID; 
     newIcon.src = itemPath; 
     newIcon.className = "oasys-toolbar-item oasys-toolbar-btn"; 
     document.getElementById('oasys-toolbar').appendChild(newIcon); 
    } 

    loadToolBar.prototype.zoom = function(containerID,size) 
    { 
     jQuery("#"+containerID+" *").css("font-size",size); 
    } 


    var sampTool = new loadToolBar('pageContent'); 

    sampTool.addImgBtn("fontMore","img/plus.png"); // Uncaught TypeError: undefined is not a function 
    sampTool.addImgBtn("fontLess","img/minus.png"); 
    sampTool.addImgBtn("printPage","img/printer.png"); 


    jQuery('#fontMore').click(function(){ 
     sampTool.zoom('pageContent','+=2px'); 
    }); 


    jQuery('#fontLess').click(function(){ 
     sampTool.zoom('pageContent','-=2px'); 

    }); 
});