先上需要用到的全部代码片段（截取）
复制代码 代码如下:
menucontrol.prototype.boxdisplay = false;//是否显示图层选择菜单
menucontrol.prototype.controlui;
menucontrol.prototype.show = function(){
if(pointcontrol.boxdisplay){
pointcontrol.hide();
}
menuboxdiv.style.display = ;
this.boxdisplay = true;
this.controlui.style.backgroundcolor = '#dddddd';
};
menucontrol.prototype.hide = function(){
menuboxdiv.style.display = none;
this.boxdisplay = false;
this.controlui.style.backgroundcolor = 'white';
};
//图层选择开关
function menucontrol(controldiv, map) {
controldiv.style.padding = '5px';
var controlui = document.createelement('div');
this.controlui = controlui;
controlui.style.backgroundcolor = 'white';
controlui.style.height = '18px';
controlui.style.borderstyle = 'solid';
controlui.style.borderwidth = '1px';
controlui.style.cursor = 'pointer';
controlui.style.textalign = 'center';
controlui.title = '点击启用菜单';
controldiv.appendchild(controlui);
var controltext = document.createelement('div');
controltext.style.fontfamily = 'arial,sans-serif';
controltext.style.fontsize = '12px';
controltext.style.paddingleft = '4px';
controltext.style.paddingright = '4px';
controltext.innerhtml = '图层选择';
controlui.appendchild(controltext);
google.maps.event.adddomlistener(controlui, 'click', function() {
if(menucontrol.boxdisplay){
menucontrol.hide();
}else{
menucontrol.show();
}
});
}
//点开关框体
pointcontrol.prototype.boxdisplay = false;//是否显示图层选择菜单
pointcontrol.prototype.controlui;
pointcontrol.prototype.show = function(){
if(menucontrol.boxdisplay){
menucontrol.hide();
}
pointboxdiv.style.display = ;
this.boxdisplay = true;
this.controlui.style.backgroundcolor = '#dddddd';
};
pointcontrol.prototype.hide = function(){
pointboxdiv.style.display = none;
this.boxdisplay = false;
this.controlui.style.backgroundcolor = 'white';
};
function pointcontrol(controldiv, map) {
controldiv.style.padding = '5px';
var controlui = document.createelement('div');
this.controlui = controlui;
controlui.style.backgroundcolor = 'white';
controlui.style.height = '18px';
controlui.style.borderstyle = 'solid';
controlui.style.borderwidth = '1px';
controlui.style.cursor = 'pointer';
controlui.style.textalign = 'center';
controlui.title = '点击操控点菜单';
controldiv.appendchild(controlui);
var controltext = document.createelement('div');
controltext.style.fontfamily = 'arial,sans-serif';
controltext.style.fontsize = '12px';
controltext.style.paddingleft = '4px';
controltext.style.paddingright = '4px';
controltext.innerhtml = '点';
controlui.appendchild(controltext);
google.maps.event.adddomlistener(controlui, 'click', function() {
if(pointcontrol.boxdisplay){
pointcontrol.hide();
}else{
pointcontrol.show();
}
});
}
做的是谷歌的地图应用，其中有右方有两个div按钮，通过点击打开左方的div子菜单
要求是
打开前判断该子菜单是否已经为打开状态，如是，则先关闭，后打开
在开关子菜单时，按钮会据相应行为变色
这里就要求在各个按钮的show()方法下操作另一按钮的属性和方法来达到开关的效果
开始时写成这样
复制代码 代码如下:
menucontrol.prototype.controlui;
menucontrol.prototype.show = function(){
controlui.style.backgroundcolor = '#dddddd';//直接调用属性
};
function menucontrol(controldiv, map) {
controlui = document.createelement('div');
controlui.style.backgroundcolor = 'white';
}
结果无论开关哪一个菜单，都只有“点”按钮变色
原因大概是controlui莫名定义为全局变量了
后来我试图这样
复制代码 代码如下:
menucontrol.prototype.controlui;
menucontrol.prototype.show = function(){
this.controlui.style.backgroundcolor = '#dddddd';//添加this关键字
};
function menucontrol(controldiv, map) {
controlui = document.createelement('div');
controlui.style.backgroundcolor = 'white';
}
结果还是失败
后来我想通了，大概这样就可以了
复制代码 代码如下:
menucontrol.prototype.controlui.style.backgroundcolor = white;//一上来就给你赋值，看你往哪儿跑
menucontrol.prototype.show = function(){
this.controlui.style.backgroundcolor = '#dddddd';
};
function menucontrol(controldiv, map) {
controlui = document.createelement('div');
this.controlui.style.backgroundcolor = 'white';
}
这样至少有错误信息了，不能给undefined添加style属性什么的
于是我绝望了，准备给所有属性也添加上全局变量，这样调用就方便许多
没成想，被自己启发了
于是就有了最开始那段代码
复制代码 代码如下:
menucontrol.prototype.controlui;//先建立此属性，挖一个坑
menucontrol.prototype.show = function(){
this.controlui.style.backgroundcolor = '#dddddd';//使用this关键字调用，实际调用的是this.controlui对象
};
function menucontrol(controldiv, map) {
var controlui = document.createelement('div');//建立局部变量，并正常赋值
this.controlui = controlui;//将此局部变量反赋给this对象的属性，达到关联引用
controlui.style.backgroundcolor = 'white';//正常调用引用对象进行操控
}
这样就将prototype添加的属性和自身创建的局部变量关联起来，使其可被外部其它对象所调用获取
达到成功将同名属性通过类对象进行区分并全局调用