id:ibatasn
ベストアンサーあり
ウェブ制作

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回まで
  • 登録：
  • 終了：2012/08/07 09:54:59

ベストアンサー

id:ku__ra__ge No.1

回答回数118ベストアンサー獲得回数40

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

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

コメント（2件)

  • id:taknt
    きゃづみぃ 2012/07/31 10:27:57
    なんで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
    よしたか 2012/07/31 11:03:26
    Map_Showはそれぞれ別の場所のhrefに入れて使ってるんです。。
    <li><a href="javascript:Map_Show0('mapEur0')">あああ</a></li>
    <li><a href="javascript:Map_Show0('mapAsia0')">あああ</a></li>
    教えていただいたコードを、ちょっと触っても見ましたけど動きませんでした。。T_T

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

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ