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人5回まで
  • 13歳以上
  • 登録:2012/07/31 10:17:59
  • 終了:2012/08/07 09:54:59

ベストアンサー

id:ku__ra__ge No.1

ku__ra__ge回答回数118ベストアンサー獲得回数402012/07/31 10:59:03

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

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;
		}
	};
}
id:ku__ra__ge

単体で動く版。

<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>

でも、そんな複雑にしなくてもこれでいい気がする。

<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>
2012/07/31 12:10:38
id:ibatasn

まとめられました!ありがとうございます!
勉強になるように書いていただいて、ほんとうにありがとうございました!!

2012/07/31 15:50:06
  • id:taknt
    なんで3つに分けてるのかわからん・・・。

    こんなんじゃダメ?

    mapAirStr='mapWorld0';
    Map_Show(mapAirStr);
    mapAirStr='mapWorld1';
    Map_Show(mapAirStr);
    mapAirStr='mapWorld2';
    Map_Show(mapAirStr);

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


  • id:ibatasn
    Map_Showはそれぞれ別の場所のhrefに入れて使ってるんです。。
    <li><a href="javascript:Map_Show0('mapEur0')">あああ</a></li>
    <li><a href="javascript:Map_Show0('mapAsia0')">あああ</a></li>
    教えていただいたコードを、ちょっと触っても見ましたけど動きませんでした。。T_T

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません