前回記事で作成したjQueryとcookieを使用した開閉メニューを、頂いたアドバイスで閃いたやり方と合わせて、よりjQueryっぽい記述に修正しましたので変更点を書いていきたいと思います。
まずは、完成サンプル
⇒【よりjQueryらしい】cookieを使用して開閉を保持するメニュー完成サンプル
前回記事をまだ読んでいない方はjQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみるを先にご覧ください。
今回のサンプルでは
本当はopendd[0]~[n]というcookieが複数セットされるのを避けたかったのですが、うまく記述できませんでした＞＜
詳しい方アドバイスとか頂けると元気出ます！よろしくお願いします。
と前回嘆いていた部分を改善して、よりjQueryらしい記述に変更しています。
それではサンプルの説明をしていきます。
開閉、cookie、初期状態を制御するScriptの修正
根幹となるScript部分の記述を以下の様に書き直しました。
こんな感じで実装しています。
cookieの保存の仕方に関して
前回は開閉箇所に応じて、固有のcookieを作成していましたが、今回はindex番号をcookieの値に保存するという形にしています。
0番目と1番目が開いている場合は「01」もしくは「10」と保存されるような具合です。
こうすることで、cookieを複数セットせずに済みます。
複数セットすると以下の様に、上限に引っかかる可能性もありますのでやはりこちらの形の方が望ましいです。
⇒異常感想注意報: Cookieの上限値は１サイトあたり20個、全部で300個です
更に不要なcookieを残さない様に31～32行目で空の場合は削除するようにしています。
実際にcookieに保存されている値を確認しながらサンプルをご覧ください。
Scriptの変更箇所の説明
まずは4行目※1部分です。
for文では無くeach()に置き換える
jQueryでは便利なeach関数（メソッド？調べても呼び方が良く分からない＞＜）が用意されています。
これは
合致した全てのエレメントに対して関数を実行する。jQuery 1.3.2 日本語リファレンス
これは、合致するエレメントが見つかる度に1度ずつ、毎回関数が実行されることを意味する。
以下サイトでeach()の簡単な使い方が分かると思います。
⇒jQueryを使い要素の出てくる順に番号をつける方法（forの代わりにeach()を使う繰り返し） | THE HAM MEDIA
続いて6行目※2、35行目※3部分です。
indexOf、replaceを使って文字列を操る
ここら辺は凄いアナログな気もしてるのですが、文字列を操ってcookieの値を変更しています。
参考サイト：JavaScript：文字列検索・置換
まず4行目では、［indexOf］でcookieの値にindex番号が含まれるか、検索をかけています。
含まれなかった場合には値として「-1」が返ってきます。
35行目では、［replace］を使ってindex番号を空に置換しています。
これで完成です。
⇒【よりjQueryらしい】cookieを使用して開閉を保持するメニュー完成サンプル
残された課題
動作としては個人的には完璧なのですが、なんかif文に頼り過ぎている気がしますね。
どうしたものやら。
また詳しい方、アドバイス頂けるととても喜びます！
よろしくお願いします。
このエントリーのトラックバックURL：
Posted by ; まこと ： 2011年11月30日 17:28
IEだと「書き直しました」の直後のウィンドウ内に砂色の背景しか表示されないです。
FFだとコードがちゃんと表示されます。
Posted by ; midori ： 2012年1月12日 22:10
caraldo_K
Webディレクター的な事やってます！iPhone楽しい！マラソン・ロードバイクで肉体改造計画中！でも一番好きなのは漫画です㌰㌰⋋( 'Θ')⋌㌰㌰
poooooon
俗に言うWeb屋の人。馬車馬のように働きお休みがありません。いつか目の前に天使ちゃんが舞い降りてきてくれるのではないかと妄想を膨らませる毎日。
- Web [83]
- スマートフォン [29]
- デザインツール [13]
- Fireworks [4]
- Illustrator [1]
- Photoshop [6]
- パソコン [33]
- プログラミング [49]
- JavaScript [25]
- MovableType [24]
- PHP [9]
- 個人的ななにか [58]
localStorageに保存しては？