- 締切済み
[jQuery]フォームで画像切替、遷移しても維持
こんにちわ。jQuery初心者です。 入力フォーム内で、3択のラジオボタンの選択内容によって 画像アイコンを切り替える仕組みを作成しています。 ▼javascript(jQuery)側 $(function(){ $("input[name='ans[reply]']:radio").click(function() { var index = $("input[name='ans[reply]']:radio").index(this); switch(index) { case 0 : $('img#chageImg').attr('src','../../common/img/icon_02.gif'); break; //デフォルト case 1 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; case 2 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; } }); ▼html側 <body onload="chgImg();"> <img src="/common/img/icon_02.gif" alt="#" id="chageImg" width="40" height="20" /> 切り換え自体は、↑の書き方で問題なく動くのですが、 [submit]した後の入力エラーや、確認画面へ遷移後に戻ると、 上記の"デフォルト"のアイコン表示に戻ってしまいます。 ※エラーチェックやvalueの受け渡しはPHPで制御しています。 下記（A）（B）2通りの方法を思い付き、 リファレンスではまだ応用がよく分からず、行き詰まっています。 （A）関数化して、bodyのonloadで読み込む （B）cookieで制御 ※再来訪の際には、"デフォルト"のアイコン表示 どちらかシンプルな方法で わかる方がいらっしゃいましたら、教えていただけないでしょうか。 よろしくお願いいたします。
- byID
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
入力フォーム内と言う事は <body onload="chgImg();"> <img src="/common/img/icon_02.gif" alt="#" id="chageImg" width="40" height="20" /> は違いますよね。 <form action="./"> <p><img src="" width="" height="" alt=""></p> とかですよね。 なら、その時に<input type="hidden" name="backImg" value="../../common/img/icon_01.gif">の値も書き換えて、再度フォームを作成する時に順番変えればよい。 重要なフォームのあるところに、(jQueryを含む)javascriptを使うべきでないとお考えなら、もっとも良いのはCookieとサーバー側での処理です。画像を選択した時点で一旦その内容をサーバーに送り、cookieを書き換えてフォームを再提出。そのときに画像自体を変更してしまう。../../common/imgのいうスクリプトを用意して、cookieの値によって/出力される画像をicon_02.gifを他のものに変える。
補足
ありがとうございます。 > Cookieとサーバー側での処理 今回は、この方法が適しているのですね。 cookieの制御ということので、検索みたところ ↓を参考にして進めてみようと思っていますが、 http://www.favorite-labo.org/view/306?continue=1 > そのときに画像自体を変更してしまう。 > ../../common/imgのいうスクリプトを用意 初心者のため、↑がよく分からなかったのですが、もし より良いサンプルあれば、参考にさせていただければと思います。 よろしくお願いします。