jQuery：“5分で実装” ラジオボタンのような切替えスイッチと、同時にテキスト表示も切替える方法
jQueryではバージョン1.9から「toggle()」メソッドが非推奨となりました。
ラジオボタンのようなものを作るのに便利だったんですけど。
そのためボタンなどの切替えを実現するには自前でセレクタにaddClass()するなどしてやらなければならなくなりました。
企業などのサイトで日本地図上に、支店のポインタ（ボタン）を配置し、マウスオーバーすると枠内に対象の支店の名称と住所が切り替わって表示されるというものです。
HTML
<div id="parent">
<ul id="mapselect">
<li id="otaru"></li>
<li id="niigata"></li>
<li id="nasu"></li>
・・・中略・・・
<li id="toyama"></li>
<li id="fukui"></li>
<li id="shiga"></li>
<li id="sikoku"></li>
</ul>
</div>
HTMLは、ボタンをliタグで表示し、それぞれをpositionで配置します。
（もちろんliタグ内にaタグ入れてボタンにしても良いです。その方が正しいのかも）
また、背景となる以下の地図画像を最上位のdivタグのbackgroundへ設定。
CSS
ボタンの画像は、マウスアウト時・マウスオーバー時の画像を上下につなげて一つにしたものを使います。
#parent{
background-image:url(背景となる地図画像へのパス);
width:画像幅;
height:画像高さ;
position:relative;
}
ul#mapselect li {
list-style:none;
}
/* マウスオーバー時 */
.selHover {
overflow:hidden;
width:ボタン幅;
height:ボタン高さ;
display:block;
background-image:url(ボタンの画像へのパス);
background-position:0 -25px;//マウスオーバー時の表示位置変更
}
/* マウスアウト時 */
.selOut {
overflow:hidden;
width:ボタン幅;
height:ボタン高さ;
display:block;
background-image:url(ボタンの画像へのパス);
background-position:0 0;
background-repeat:no-repeat;
}
.parent #otaru {
position:absolute;
top:82px;//ポインタの位置を適宜px指定
left:420px;//ポインタの位置を適宜px指定
}
.parent #niigata {
position:absolute;
top:272px;
left:367px;
}
.parent #nasu {
position:absolute;
top:302px;
left:386px;
}
.parent #ibaragi {
position:absolute;
top:315px;
left:400px;
}
.parent #honbu {
position:absolute;
top:329px;
left:331px;
}
・・・以下略・・・
支店名と住所の表示される場所のスタイルとHTMLは適宜設定してください。
JavaScript
$(function(){
var selector = $("ul#mapselect li");
var idname;
selector.addClass("selOut");
/* 初期セレクト状態(ページを開いた時の状態設定) */
$("#honbu").removeClass("selOut");
$("#honbu").addClass("selHover");
selector.mouseover(function(){
selector.removeClass("selHover");
selector.addClass("selOut");
$(this).removeClass("selOut");
$(this).addClass("selHover");
idname = $(this).attr("id");
if(idname == "otaru"){
$(".swh_all_info_set01").replaceWith('<div>小樽<br>北海道小樽市1丁目</div>');
}else if(idname == "niigata"){
$(".swh_all_info_set01").replaceWith('<div>適宜挿入先に表示すべき内容を記述してください。</div>');
}else if(idname == "nasu"){
$(".swh_all_info_set01").replaceWith('<div></div>');
}else if(idname == "ibaragi"){
$(".swh_all_info_set01").replaceWith('<div></div>');
}else if(idname == "honbu"){
$(".swh_all_info_set01").replaceWith('<div></div>');
}
・・・中略・・・
}
});
});
キモは、変数selectorに対象のセレクタを入れておいて、マウスオーバ―されたボタンのみを切り替えるためにmouseover()メソッドの中で$(this)で指定してremoveClass()したりaddClass()したりする点です。
もし$(this)でやらず、直接セレクタを指定する場合はその都度id指定しなければなりません。
できるだけ少ないソースで完結しましょう。
もっとうまい方法あったら教えてください。
