Javascript构造对象化类,但是不是想要的样子,三个DIV,只有一个加上了事件,其它两个无效,这个Js类如何修改才能正常<!--Test.html --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="/Scripts/Base.js"></script>
<script type="text/javascript" src="Test.js"></script>
<style type="text/css">
div
{
    background:#ccf;
    padding:12px;
    border:1px solid #99f;
   margin-top:1px;  
}
</style>
</head>
<body>
<div id="Rpt">A:现在只有这个DIV加了点击事件</div>
<div id="Div1">B:这个DIV没加上点击事件</div>
<div id="Div2">C:这个DIV没加上点击事件</div>
<script type="text/javascript">
new Ap("Rpt");
new Ap("Div1");
new Ap("Div2");
</script>
</body>
</html><!--Test.js -->function Ap(Id)
{
    var Rpt=document.getElementById(Id);
    this.Sex="男";
if(typeof Ap.Initialized == "undefined")
{
    Ap.prototype.CldC=function()
   {
        Ap.apply(this);
       Rpt.innerHTML+="<br />Class method<br />"+this.Sex;
   }   
   Rpt.onclick=this.CldC; 
   Ap.Initialized=true;
  } 
}/* 这样就不行
function Ap(Id)
{
    this.Rpt=document.getElementById(Id); 
    this.Sex="男";
if(typeof Ap.Initialized == "undefined")
{
    Ap.prototype.CldC=function()
   {
        this.Rpt.innerHTML+="<br />Class method<br />"+this.Sex;
   }   
    this.Rpt.onclick=this.CldC; 
   Ap.Initialized=true;
  } 
}
*/

解决方案 »

  1.   

    ele.onclick=function(){this...}这个里面的this是指的被点击的元素function Ap(Id)
    {
    this.Rpt=document.getElementById(Id); 
    this.Sex="男";
    var pThis = this;
    this.Rpt.onclick = function(){
    pThis.Rpt.innerHTML+="<br />Class method<br />"+pThis.Sex;
    };
    }
    用一个pThis来持久Ap元素即可
      

  2.   

    JKelfin的方法可以,也很好,不知还有没其它方法?
      

  3.   

     闭包也可以。指定参数!不过个人感觉要保存当前操作对象还是用变量保存this更好些!
      

  4.   

    需求是我正在给公司作Js库,就是每一个功能是除了与Base类相关外,与其它的类是分离的,这个问题是我在作这个Rolls类时遇到的,为了简单,我贴出了另一个类似的简单例子
    下面是我按JKelfin的方法用变量Roll保存了Rolls对象
    function Rolls(Id, Speed){
        var C = new Cm();
        this.Wrap = C.G(Id);
        this.Original = C.Gs(this.Wrap, "div")[0];
        this.Ectype = this.Original.cloneNode(true);
        this.Wrap.appendChild(this.Ectype);
        var Roll=this;  
    if(typeof Rolls.Initialized == "undefined")
    {
        Rolls.prototype.Marquee=function()
        {
            //向左滚动
            if (Roll.Wrap.scrollLeft >= Roll.Original.offsetWidth)
            {
                Roll.Wrap.scrollLeft -= Roll.Original.offsetWidth;
            }
            else
            {
                Roll.Wrap.scrollLeft++;
            }
            //向上滚动
            if (Roll.Wrap.scrollTop >= Roll.Original.offsetHeight)
            {
                Roll.Wrap.scrollTop -= Roll.Original.offsetHeight;
            }
            else
            {
                Roll.Wrap.scrollTop++;
            }
        };
        var MyMarquee = setInterval(Roll.Marquee, Speed);
        C.AddEvent(Roll.Wrap, "mouseover", function(){clearInterval(MyMarquee);});
        C.AddEvent(Roll.Wrap, "mouseout", function(){MyMarquee = setInterval(Roll.Marquee, Speed);});
        Rolls.Initialized=true;
        }
    }
      

  5.   

    这是Base类
    function Cm()
    {
        this.BdTop = document.body.scrollTop || document.documentElement.scrollTop;
        this.Fh = document.body.clientHeight;
    if(typeof Cm.Initialized=="undefined")
    {
        Cm.prototype.Sw = screen.availWidth;
        Cm.prototype.Sh = screen.availHeight;
    Cm.prototype.G=function(id)
    {
    return document.getElementById(id); 
    };
    Cm.prototype.Gs = function (prt, tg)
    {
        var prt = typeof (prt) == "string" ? Cm.prototype.G(prt) : prt,
             Childs = new Array(),
             Ds = prt.getElementsByTagName(tg);
        for (var i = 0; i < Ds.length;i++)
        {
            if (Ds[i].parentNode == prt)
            {
                Childs.push(Ds[i]);
            }
        }
        return Childs;
    };
    Cm.prototype.AddEvent = function (obj, ev, fn)
    {
        if (window.addEventListener)
        {
            obj.addEventListener(ev, fn, false);
        }
        else if (window.attachEvent)
        {
            obj.attachEvent("on" + ev, fn);
        }
        else
        {
            obj["on" + ev] = fn;
        } };
    Cm.prototype.DelEvent=function(obj, ev, fn)
    {
    if(window.removeEventListener)
    {
    obj.removeEventListener(ev,fn,false);
    }
    else if(window.detachEvent)
    {
    obj.detachEvent("on"+ev,fn);
    }
    else
    {
    obj["on"+ev]=null;
    }
    };
    Cm.prototype.DelClass=function(M)
    {
    if(M.getAttribute("class"))
    {
    M.removeAttribute("class");
    }
    else if(M.getAttribute("className"))
    {
    M.removeAttribute("className");
    }
    }
    Cm.prototype.DelStyle = function (C)
    {
        if (C.getAttribute("style"))
        {
            C.removeAttribute("style");
        }
        else if (C.attributes["style"])
        {
            C.removeAttributeNode(C.attributes["style"]);
        }
    };
    Cm.Initialized=true;
    }
    }
      

  6.   

    但是,这个Rolls类是只有一个实例:
    new Rolls("LMar",100);
    new Rolls("TMar",100);
    但是只有一个能正常运行,不知道是哪里的问题,纠结中ing...