Неопределенный объект после определения класса

Question

Я добавляю три кнопки и управляю их одним классом. Но я получаю эту неопределенную ошибку.

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); 
    } 



}); 

Заранее спасибо

Answer 1

Когда вы назвали loadToolBar.addImgBtn() Funciton, 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'); 

    }); 
}); 

Answer 2

Как Xlander писал попытаться вынести определение и прототипы классов за пределами функции OnLoad или просто поставить их в коде, прежде чем пытаться использовать их.

Answer 3

Эти функции не определены при создании объекта в коде. Попробуйте переназначение, как это,

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'); 

    }); 
});