KH-WEBLOG TOP > WEBメモ > JavaScript > jQueryで別々のリストを連動させて処理

jQueryで別々のリストを連動させて処理

jQueryで別々のリストを連動させて処理する方法をメモ

例えば

<ul class="list1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="list2">
<li>ここをクリックかマウスオーバー等で.list1の1を処理</li>
<li>ここをクリックかマウスオーバー等で.list1の2を処理</li>
<li>ここをクリックかマウスオーバー等で.list1の3を処理</li>
</ul>

のようなHTMLがあるときに

list2のliに対してマウスオーバーしたときにlist1の同じ番目のliに対してクラス(hover)を追加したい場合は

$(function(){
   $('.list2 li').mouseover(function(){
	   var index = $('.list2 li').index(this);
	   $(".list1 li").eq(index).toggleClass("hover");
   });
});
$(function(){
   $('.list2 li').mouseout(function(){
	   var index = $('.list2 li').index(this);
	   $(".list1 li").eq(index).toggleClass("hover");
   });
});

でOK

内容的には
var index = $(‘.list2 li’).index(this);
で現在何番目のリストが選択されているを取得し、
.eq(index)
で同じ番目を指定しています。

後は

.hover{
background:red;
}

等のようにcssを用意すれば、
マウスオーバーされた別のリストの同じ個所の背景が変更されます。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パンくずリスト パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事