JavaScriptにおけるオブジェクトへの属性付与の誤解入門_基礎知識

まず、使用する必要があるすべてのコード スニペットをアップロードします (インターセプト)

コードをコピーします コードは次のとおりです:

MenuControl.prototype.boxDisplay = false;//レイヤー選択メニューを表示するかどうか
MenuControl.prototype.controlUI;
MenuControl.prototype.show = function(){
if( pointControl.boxDisplay){
pointControl.hide();
}
menuBoxDiv.style.display = "";
this.controlUI.style.backgroundColor = '#DDDDDD';
};
MenuControl.prototype.hide = function(){
menuBoxDiv.style.display = "none";
this.boxDisplay = false; controlUI.style.backgroundColor = 'white';
//レイヤー選択スイッチ
function MenuControl(controlDiv,map) {
controlDiv.style.padding = '5px'; var controlUI = document.createElement ('div');
this.controlUI = controlUI;
controlUI.style.height = '18px'; controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.textAlign = 'center'; 🎜>controlUI.title = 'クリックしてメニューを有効にする';
controlDiv.appendChild(controlUI)


var controlText = document.createElement('div'); .fontFamily = 'Arial,sans -serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '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; = 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"; .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.height; = '18px';
controlUI.style.borderStyle = 'solid';
controlUI.style.cursor = 'pointer'; .textAlign = 'center ';
controlUI.title = 'コントロール ポイント メニューをクリックします';


var controlText = document.createElement('div) ');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.paddingLeft = '4px'; .style.paddingRight = ' 4px';
controlText.innerHTML = 'Point';
controlUI.appendChild(controlText); .event.addDomListener( controlUI, 'click', function() {
if(pointControl.boxDisplay){
pointControl.hide();
}else{
pointControl.show();
}
});
}


は、右側に 2 つの div ボタンがあります。


要件は、


を開く前に、サブメニューが既に開いているかどうかを確認し、開いている場合は、最初に閉じてから開きます。

サブメニューに応じてボタンの動作が変わります

ここでは、スイッチ効果を実現するために、各ボタンの show() メソッドの下で別のボタンのプロパティとメソッドを操作する必要があります

冒頭はこう書いています




コードをコピー


コードは次のとおりです。


MenuControl.prototype .controlUI;
MenuControl.prototype.show = function(){

controlUI.style.backgroundColor = '#DDDDDD';// 属性を直接呼び出す
}; {
controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'
}
;
その結果、どのメニューを開いても閉じても、「クリック」ボタンだけ色が変わります

原因はおそらくcontrolUIがグローバル変数として不可解に定義されているためです

後ほど私はこれを試しました

コードをコピー コードは次のとおりです。

MenuControl.prototype.controlUI;
MenuControl.prototype.show = function(){
this.controlUI.style.backgroundColor = '#DDDDDD';//このキーワードを追加します
};
function MenuControl(controlDiv, map) {
controlUI = document.createElement('div' ; >

コードをコピー


コードは次のとおりです:

MenuControl.prototype.controlUI.style.backgroundColor = "white" //値が表示されたらすぐに値を割り当て、どこに行くかを確認します。 MenuControl.prototype.show = function(){ this.controlUI.style.backgroundColor = '#DDDDDD'; function MenuControl(controlDiv, map) { controlUI = document.createElement('div'); style.backgroundColor = 'white'; }

少なくとも、未定義にスタイル属性を追加することはできません。すべての属性にグローバル変数を追加することで呼び出しがより便利になるように準備しました。

それはうまくいきませんでしたが、私は自分自身からインスピレーションを得て、次のことを思いつきました。最初のコード




コードをコピーします

コードは次のとおりです:


MenuControl.prototype。 controlUI;//最初にこのプロパティを確立し、穴を掘ります
MenuControl.prototype.show = function(){
this.controlUI.style.backgroundColor = ' #DDDDDD';//このキーワードを使用して、実際の呼び出しは this.controlUI object
};
function MenuControl(controlDiv, map) {

var controlUI = document.createElement('div') ;//ローカル変数を作成し、通常どおり値を割り当てます this.controlUI = controlUI;//関連付けられた参照を実現するために、このローカル変数をこのオブジェクトのプロパティに割り当て直しますcontrolUI.style.backgroundColor = 'white';/ / 通常は操作のために参照オブジェクトを呼び出します } このようにして、プロトタイプによって追加された属性は、それ自身が作成したローカル変数に関連付けられ、他の外部オブジェクトから呼び出して取得できるようになります

成功を達成します、クラスオブジェクトを通じて同じ名前の属性を区別し、それらをグローバルに呼び出します