MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. jqueryのセレクタに変数を使用する

jqueryのセレクタに変数を使用する

ツイート
このエントリーをはてなブックマークに追加

jqueryを使ってスライドショー等を作成する時、
またユーザー側で操作する際などに、
スライドが変数で操作出来ると便利。

以下のようなHTMLがあったとする。

<!-- メインのスライド -->
<ul>
<li class="slide0"><img src="img/dummy0.jpg" alt="ダミーです" width="900" height="400" /></li>
<li class="slide1"><img src="img/dummy1.jpg" alt="ダミーです" width="900" height="400" /></li>
<li class="slide2"><img src="img/dummy2.jpg" alt="ダミーです" width="900" height="400" /></li>
<li class="slide3"><img src="img/dummy3.jpg" alt="ダミーです" width="900" height="400" /></li>
</ul>

<!-- スライドを操作するナビ -->
<ul>
<li class="nav0"><a href="#"><img src="img/nav_dummy0.jpg" alt="ダミーです" width="30" height="30" /></a></li>
<li class="nav1"><a href="#"><img src="img/nav_dummy1.jpg" alt="ダミーです" width="30" height="30" /></a></li>
<li class="nav2"><a href="#"><img src="img/nav_dummy2.jpg" alt="ダミーです" width="30" height="30" /></a></li>
<li class="nav3"><a href="#"><img src="img/nav_dummy3.jpg" alt="ダミーです" width="30" height="30" /></a></li>
</ul>

タイマー処理で、スライドを切り替えていく場合、
変数の数値を使うと便利。0の時はslide0を、1の時はslide1をみたいな具合に。

変数をjqueryのセレクタに指定する場合。

$('.slide' + index).fadeIn('fast',function(){ index == 3 ? index = 0 : index++; });

また、スライドを操作するナビをクリックした時に対応するスライドを表示する方法。

$('a').click(function(){
index = Number($(this).attr('class').replace('nav',''));
//ナビのクラス名から'nav'という文字列を取り除く
//取り除くと数字の文字列だけになるので、それをNumber()で数値に変換する(文字列のままだと++など計算できないため)
});
$('.slide' + index).fadeIn('fast',function(){ index == 3 ? index = 0 : index++; });

Number()で数値化するのを忘れずに。

もし、この記事が役に立ったらシェアしてくださいね!

ツイート
このエントリーをはてなブックマークに追加
タグ
カテゴリ

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

JavaScript 第5版

JavaScript 第5版

David Flanagan

JavaScriptをやるなら、必ず読んでおきたいJavaScriptのバイブル的な本。基礎知識から高度な部分まで幅広くカバーしてくれてます。

¥4,410(税込)

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

Stoyan Stefanov

JavaScriptにおける無駄のない効率のいいソースコードや、こんな風に書くのか!的な目からウロコな事がたくさん書いてある本。筆者イチオシ。

¥2,940(税込)