THE HAM MEDIA BLOG

jQuery勉強:隣の値取得とリピート

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

メモ

勉強のためのメモエントリー。

リストなどでクリックしたら隣(次)の値に切り替わるというスクリプト。リストの最後までいったら最初に戻るや、選択している部分の背景色を変える機能など、ちょっとした機能もつけたサンプルです。



使用するHTML

今回利用するHTMLは以下の通り

■サンプルHTML

<div id="test1">
  <form>
    <p>
      選択されているもの<input type="text" />
      <button>next</button>
    </p>
</form>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
  </ul>
</div>

今回は手っ取り早くリストで指定。スクリプトもリストに対応するように作ったもの。pなどに変更もできるサンプル。

解説付きスクリプト

■スクリプト

jQuery(function($){

//リストの数-1を取得
var List = $('div#test1 ul > *').length;

//表示しておく初期値を取得
var listText = 
  $('div#test1 ul > *:nth-child(1)').text();

//初期値を表示
$('#test1 form input').val(listText);

//表示している初期値の背景色を変える
$('div#test1 ul > *:nth-child(1)')
  .css('backgroundColor','#add6ff');

//変数の初期化
var i = 1;
//ボタンのクリック動作
$('div#test1 button').click(function(){

  //背景色をリセット
  $('div#test1 ul > *')
    .css('backgroundColor','#ffffff');
  
  //変数 + 1
  i++;
  
  //次の値を取得
  listText = 
    $('div#test1 ul > *:nth-child('+i+')').text();
  	
  //次の値を表示
  $('#test1 form input').val(listText);
  
  //表示している値の背景色を変える
  $('div#test1 ul > *:nth-child('+i+')')
    .css('backgroundColor','#add6ff');
  
  //マウスホバー時の背景色を変える機能呼び出し
  $('div#test1 ul >*').each(BgColor);
  
  //リストの最後まで行ったら最初に戻る処理
  if(i == List){i = 0};
  
  //ボタンを押しても上記機能以外動作しないように
  return false;
});

//マウスホバー時の背景色を変える機能呼び出し
$('div#test1 ul >*').each(BgColor);

//マウスホバー時の背景色を変える機能
function BgColor(){
  var bgColor = $(this).css('backgroundColor');
  $(this).hover(function(){
    $(this).css('backgroundColor','#ffadd6');
  },function(){
    $(this).css('backgroundColor', bgColor);
  });
};
});

■プレビュー

選択されているもの

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

細かいところにも気を使う

値を次に次にと変えるだけなら簡単だが、今回のサンプルのようにマウスホバーの処理が加わると少し大変になったりする。ホバーする前の色を取得していないとマウスアウトの時の色が変わらなくなってしまう。

また、今回iの変数をわかりやすく扱うために「:nth-child()」を利用。「:eq()」を使ったりすると-1処理しなければならなかったり、わかりにくくなるので、今回はこれを利用した。

今回の内容は特に何に使うというあてはないのですが「どう作るのかな」なんてのを思ったので、メモ代わりに作ってみた。使うのかは別として勉強としてはありですね。失敗談なんかも載せたほうがいいのだろうか…



この記事へのコメント
こんにちは!
いつも参考にさせてもらっています。

>失敗談なんかも載せたほうがいいのだろうか…

ぜひ載せて欲しいです!
失敗したり詰まったりするのは多くの人が似たような箇所な気がしますし、、、
Posted by KkK at 2009年03月19日
>KkKさん
コメントありがとうございます!
そうですか、失敗したり詰まった話も書いたほうがいいのですね。たまに載せたりはしましたが、頻度としてはかなり少なかったので、今後はできるだけ失敗したスクリプトも参考として載せておこうと思います!
Posted by ハム at 2009年03月27日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。