人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問です。
以下のように連番数字が付いた、同じ挙動の関数を
ひとつにまとめて書く書き方があれば教えてください。
宜しくお願い致します。

mapAirStr0='mapWorld0';
function Map_Show0(mapAirJsStr0){
if(document.getElementById(mapAirStr0)){document.getElementById(mapAirStr0).style.display='none';}
if(document.getElementById(mapAirJsStr0).style.display=='none'){
$("#"+mapAirJsStr0).animate({opacity:"toggle"},"slow");
mapAirStr0=mapAirJsStr0;
}
};
mapAirStr1='mapWorld1';
function Map_Show1(mapAirJsStr1){
if(document.getElementById(mapAirStr1)){document.getElementById(mapAirStr1).style.display='none';}
if(document.getElementById(mapAirJsStr1).style.display=='none'){
$("#"+mapAirJsStr1).animate({opacity:"toggle"},"slow");
mapAirStr1=mapAirJsStr1;
}
};
mapAirStr2='mapWorld2';
function Map_Show2(mapAirJsStr2){
if(document.getElementById(mapAirStr2)){document.getElementById(mapAirStr2).style.display='none';}
if(document.getElementById(mapAirJsStr2).style.display=='none'){
$("#"+mapAirJsStr2).animate({opacity:"toggle"},"slow");
mapAirStr2=mapAirJsStr2;
}
};

●質問者: よしたか
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ku__ra__ge
ベストアンサー

連番変数を配列に置き換えてやればよいと思われます。

mapAirStr = ['mapWorld0','mapWorld1','mapWorld2'];
function Map_Show(idx, mapAirJsStr){
if(document.getElementById(mapAirStr[idx])){document.getElementById(mapAirStr[idx]).style.display='none';}
if(document.getElementById(mapAirJsStr).style.display=='none'){
$("#"+mapAirJsStr).animate({opacity:"toggle"},"slow");
mapAirStr[idx]=mapAirJsStr;
}
};

より「javascriptらしい」書き方だと、以下のような感じですかね。
クロージャを利用して、グローバル変数だった変数を各関数からのみ見えるように変更してあります。

Map_Show0 = createMapShowFunc('mapWorld0');
Map_Show1 = createMapShowFunc('mapWorld1');
Map_Show2 = createMapShowFunc('mapWorld2');

function createMapShowFunc(initMapAirStr) {
var mapAirStr=initMapAirStr;

return function(mapAirJsStr) {
if(document.getElementById(mapAirStr)){document.getElementById(mapAirStr).style.display='none';}
if(document.getElementById(mapAirJsStr).style.display=='none'){
$("#"+mapAirJsStr).animate({opacity:"toggle"},"slow");
mapAirStr=mapAirJsStr;
}
};
}

ku__ra__geさんのコメント
単体で動く版。 >|javascript| <html><head> <script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script> $(function(){ $("div#map0 div:not(:first)").hide(); $("div#map1 div:not(:first)").hide(); }); Map_Show0 = createMapShowFunc('mapWorld0'); function createMapShowFunc(initMapAirStr) { var mapAirStr=initMapAirStr; return function(mapAirJsStr) { if(document.getElementById(mapAirStr)){document.getElementById(mapAirStr).style.display='none';} if(document.getElementById(mapAirJsStr).style.display=='none'){ $("#"+mapAirJsStr).animate({opacity:"toggle"},"slow"); mapAirStr=mapAirJsStr; } }; } </script> </head><body> <h1>map0</h1> <div id="map0"> <div id="mapWorld0">mapWorld0</div> <div id="mapEur0" >mapEur0</div> <div id="mapAsia0" >mapAsia0</div> </div> <ul> <li><a href="javascript:Map_Show0('mapWorld0')">mapWorld0</a></li> <li><a href="javascript:Map_Show0('mapEur0')" >mapEur0</a></li> <li><a href="javascript:Map_Show0('mapAsia0')" >mapAsia0</a></li> </ul> </html> ||< でも、そんな複雑にしなくてもこれでいい気がする。 >|javascript| <html><head> <script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script> $(function(){ $("div#map0 div:not(:first)").hide(); $("div#map1 div:not(:first)").hide(); $("a[map]").click(function(){ var group = $(this).attr("group"); var showMap = $(this).attr("map"); $("#"+group+" div").hide(); $("#"+group+" div#"+showMap).animate({opacity:"toggle"},"slow"); }); }); </script> </head><body> <h1>map0</h1> <div id="map0"> <div id="mapWorld0">mapWorld0</div> <div id="mapEur0" >mapEur0</div> <div id="mapAsia0" >mapAsia0</div> </div> <ul> <li><a href="javascript:void(0);" group="map0" map="mapWorld0">mapWorld0</a></li> <li><a href="javascript:void(0);" group="map0" map="mapEur0" >mapEur0</a></li> <li><a href="javascript:void(0);" group="map0" map="mapAsia0" >mapAsia0</a></li> </ul> </html> ||<

よしたかさんのコメント
まとめられました!ありがとうございます! 勉強になるように書いていただいて、ほんとうにありがとうございました!!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ