javascript - 定义类后 undefined object

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()时，函数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');

  });
});