jQueryで色々

勤務先のホームページで必要になったので、jQuery使って、Clickをトリガーにフラグ立てたり
画面のパーツ消したりいろいろする。というのを作成する事になった。

単純なWEBフォームなんですが、社内からの要求は

• 全体が長いのでデフォルトはほぼ全てのパーツを消しておきたい。
• 利用者が、選択をした場合に表示させたい
• 選択している／していないを明確にしたい。(input checkboxは嫌)
• 選択状況で確認画面を表示を切り分けたい。

という事でした。

最初の感覚では、消すのは難しくない。
で、ひとまず若いコーダーに書いてもらいました。
出来上がってきたのは、ClickをトリガーにOn／Offを繰り返す非常にシンプルなもの。

発注元の部署にそのまま返却して動作確認してもらうと、

• WEBフォームなので、画面を行ったり来たりした場合に、状態は維持しして欲しい。

という追加要求が出てきしまう。

ここでバトンタッチして私がシコシコ修正を始めます。あ　ちなみにjQueryのScript書いた事ないです。
初体験でした。

HTML

  <label for="hogehogeFlag">
    <input name="hogehogeFlag" id="hogehogeFlag" type="checkbox" />hogehogeFlagだよ
  </label>
<div id="hogehogeTable">
本体
</div>

javascript

$(document).ready(function(){
	// on/off 画像を決める
	var img = 'icon_off.gif';
	var img_on = 'icon_on.gif';
	//初期設定
		// inputフィールドを画像に置き換え
		$('#hogehogeFlag').hide().after('<img id="hogehogeFlagImg" src="' + img + '" />');
		// <input name="hogehogeFlag" type="checkbox" />の設定／Checked値を取得して表示非表示を決める
		// もし利用するがチェックされていたら全ての要素を表示
		if( $('#hogehogeFlag').is(':checked') ) {
			$('#hogehogeFlagImg').attr('src',img_on);
			$('#hogehogeFlag').val('TRUE');
			$('#hogehogeTable').show();
		//そうでない全ての場合、全ての要素を非表示
		} else {
			$('#hogehogeFlagImg').attr('src',img);
			$('#hogehogeTable').hide();
		}
	//クリックをトリガーにして
	$('#hogehogeFlag').click(function(){
		// もし利用するがチェックされていたら、全ての要素を表示
		if( $('#hogehogeFlag').is(':checked') ) {
			$('#hogehogeFlagImg').attr('src',img_on);
			$('#hogehogeFlag').attr('checked','checked');
			$('#hogehogeFlag').val('TRUE');
			$('#hogehogeTable').slideDown("slow");
		//そうでない全ての場合、全ての要素を非表示
		} else {
			$('#hogehogeFlagImg').attr('src',img);
			$('#hogehogeFlag').removeAttr('checked');
			$('#hogehogeFlag').val('FALSE');
			$("#hogehogeTable").slideUp("slow");
		}
	});

});

3時間ぐらい、試行錯誤を繰り返しながら出来上がったJavaScript↑です。

よっしゃー出来たーなんて喜びながら、動作確認フェーズに移行します。

ここからが嵌りどころでした。

もともと制作環境は管理しているホームページ専用CMSをFireFoxで開きながらというもの。
動作確認フェーズまで他のブラウザは一切見てませんでした。これがいけなかった。
IEとOperaで動かないのです。

散々悩んだのですが、分からず。翌日に持ち越しました。

翌日出社後に、有識者（勝手にマスター／大先生と呼んでます）に質問をしてみました。
ちなみにマスターは年下です。

帰ってきた答えが、これ
> ラベルをクリックしたことが内部の input をクリックしたことになるのは一部のブラウザのみです。

だって。そうなんだ。
input を消して別の画像に置き換えてるから、だめなのか。ふむ。
アドバイスもくれたので、アドバイスに基づき、シコシコとさらに修正。

HTML

<input name="hogehogeFlag" id="hogehogeFlag" type="checkbox"><span id="hogehogeFlagLabel">hogehogeFlagだよ</span>
<div id="hogehogeTable">
本体
</div>

HTMLの順番がいろいろ前後する事になるので、JavaScriptの方も書き直し。
当初チェックボックスがチェックされているかの確認を以下の書き方をしていたのだけど

		if( $('#hogehogeFlag').is(':checked') ) {

これ、何故か動かなくなった。ネットで色々調べてたら
http://omnioo.com/omnioolab/web-design/jquerycheckbox.phpでCheckBoxを調べる方法について書かれていました。
参考になりそうなので、早速試してみた。

		var checked = $(this).prev().attr('checked');
		if (!checked) {

javascript

$(document).ready(function(){
	// on/off 画像を決める
	var img = 'icon_off.gif';
	var img_on = 'icon_on.gif';
	//初期設定
		// <input name="hogehogeFlag" type="checkbox" />の設定／Checked値を取得して表示非表示を決める
		$('#hogehogeFlag').hide();
		$('#hogehogeFlag').prepend('<img id="hogehogeFlagImg" src="' + img + '" />');
		// もし利用するがチェックされていたら	全ての要素を表示
		$('#hogehogeFlag').hide();
		if( $('#hogehogeFlag').is(':checked') ) {
			$('#hogehogeFlagImg').attr('src',img_on);
			$(this).val('TRUE');
			$('#hogehogeTable').show();
		//そうでない全ての場合	全ての要素を非表示
		} else {
			$('#hogehogeFlagImg').attr('src',img);
			$(this).val('FALSE');
			$('#hogehogeTable').hide();
		}
	//クリックトリガー(hogehogeFlagLabel)
	$('#hogehogeFlagLabel').click(function(){
		// もし利用するがチェックされていなかったら全ての要素を表示
		var checked = $(this).prev().attr('checked');
		if (!checked) {
			$('#hogehogeFlagImg').attr('src',img_on);
			$(this).prev().attr('checked','checked');
			$(this).prev().val('TRUE');
			$('#hogehogeTable').slideDown("slow");
		//そうでない全ての場合、全ての要素を非表示
		} else {
			$('#hogehogeFlagImg').attr('src',img);
			$(this).prev().removeAttr('checked');
			$(this).prev().val('FALSE');
			$('#hogehogeTable').slideUp("slow");
		}
	});
});

これでうまくいって、出来上がったJavaScript↑です。

そもそも、自分これが本職ではないので、部署はマーケティング関係だし、各種集計や分析、
業務フローの構築、システム部との調整なんかやってるわけですから。

まぁ　偶には？楽しいですが。