使用jQuery与OO Javascript

我想创建一个jQuery弹出脚本OO风格。我这样做是因为我想用更多的jquery/javascript扩展这段代码而不会丢失疏忽。我收到的错误是Object #<HTMLDivElement> has no method 'centerPopup'和Resource interpreted as Script but transferred with MIME type text/x-c:我是新来OO的Javascript，但在面向对象PHP颇有经验使用jQuery与OO Javascript

function popup(){ 

    var popupStatus = 0; 

    $(document).ready(function() { 
     $("#button").click(function() 
     { 
      this.centerPopup(); 
      this.loadPopup(); 
     }); 

     $("#backgroundPopup").click(function() 
     { 
      this.disablePopup(); 
     }); 

     $(document).keypress(function(e) 
     { 
      if(e.keyCode==27 && popupStatus==1) 
      { 
       this.disablePopup(); 
      } 
     }); 

    }); 

     this.loadPopup = function(){ 
     if(this.popupStatus==0) 
     { 
      $("#backgroundPopup").css(
      { 
       "opacity": "0.7" 
      }); 
      $("#backgroundPopup").fadeIn("slow"); 
      $("#popupContact").fadeIn("slow"); 

     this.popupStatus = 1; 
     } 
    } 

    this.disablePopup = function(){ 
     if(this.popupStatus==1) 
     { 
      $("#backgroundPopup").fadeOut("slow"); 
      $("#popupContact").fadeOut("slow"); 
      this.popupStatus = 0; 
     } 
    } 

    this.centerPopup = function(){ 
     var windowWidth = document.documentElement.clientWidth; 
     var windowHeight = document.documentElement.clientHeight; 
     var popupHeight = $("#popupContact").height(); 
     var popupWidth = $("#popupContact").width(); 

     $("#popupContact").css(
     { 
      "position": "absolute", 
      "top": windowHeight/2-popupHeight/2, 
      "left": windowWidth/2-popupWidth/2 
     }); 

     $("#backgroundPopup").css(
     { 
      "height": windowHeight 
     }); 
    } 
} 

var popup = new popup()

<!DOCTYPE HTML> 

<html> 
<head> 
<link rel="stylesheet" href="css/popup.css" type="text/css" media="screen" /> 
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="js/popup2.js" type="text/javascript"></script> 
</head> 
<body> 

    <center> 
     <div id="button"><input type="submit" value="Popup!" /></div> 
    </center> 

    <div id="popupContact"> 
     <a id="popupContactClose">x</a> 
    </div> 

    <div id="backgroundPopup"></div> 

</body> 
</html>

来源

2013-04-07 user2197083

可能重复[Overwrite“this”variable problem or how to call a member function？]（http：// stackoverflow。 COM /问题/ 737454 /覆盖，这个值变量问题或知识到呼叫一个成员函数） – 2013-04-07 17:40:57

$("#button").click(function() 
     { 
      this.centerPopup(); 
      this.loadPopup(); 
     });

this是不是你实际上想。这不是popup的实例，而是DOM元素（#button）。您可以通过在您的课程开始时在您的实例上保存一个参考来解决此问题：

function popup(){ 
    var self = this; 
    this.popupStatus = 0; // you should use `this` here 

    $(document).ready(function() { 
     $("#button").click(function() 
     { 
      self.centerPopup(); 
      self.loadPopup(); 
     }); 
/* ... snip ... */

来源

2013-04-07 19:30:58 Zeta

使用jQuery与OO Javascript

回答

相关问题