クリックイベントの質問です
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
こんにちは、バス予約のホームページを作っています。
こんな感じです
行き
便名 日付 出発 到着 予約する
11 2015/11/14 7：00 9：00 ラジオボタン
12 2015/11/14 8：00 10：00 ラジオボタン
帰り
便名 日付 出発 到着 予約する
21 2015/11/14 7：30 9：30 ラジオボタン
22 2015/11/14 8：30 10：30 ラジオボタン
23 2015/11/14 10：30 12：30 ラジオボタン
そこで、もし、往復便を予約したときに、帰りの出発時間が行の到着時間より前のときは、ラジオボタンのチェクを外して、エラーメッセじを出します。もちらんですが、お客さんは帰りを先にチェックする可能性もあります、その時、行にチェックを入れた時に、行のチェックを外して、エラーを出します。
行と帰りのtableにはそれぞれidをつけました、from_table,to_table
jQueryはこういう感じにかきました
こういう書き方だと、もし先に帰りをクリックしたときに、判断ができません。もちろん、逆にもう一度かけばいいですが、もっといい方法がないでしょうか？
どうぞ、よろしくお願いします！
こんな感じです
行き
便名 日付 出発 到着 予約する
11 2015/11/14 7：00 9：00 ラジオボタン
12 2015/11/14 8：00 10：00 ラジオボタン
帰り
便名 日付 出発 到着 予約する
21 2015/11/14 7：30 9：30 ラジオボタン
22 2015/11/14 8：30 10：30 ラジオボタン
23 2015/11/14 10：30 12：30 ラジオボタン
そこで、もし、往復便を予約したときに、帰りの出発時間が行の到着時間より前のときは、ラジオボタンのチェクを外して、エラーメッセじを出します。もちらんですが、お客さんは帰りを先にチェックする可能性もあります、その時、行にチェックを入れた時に、行のチェックを外して、エラーを出します。
行と帰りのtableにはそれぞれidをつけました、from_table,to_table
jQueryはこういう感じにかきました
$(document).ready(function(){
$('table tr').click(function(){
var $c = $(this).children('td').children('input[type=checkbox]');
$c.prop('checked','checked');
});
$('fromt_table tr').click(function(){
fromtime = new Date($(this).children('td').eq(1).text()+$(this).children('td').eq(3).text());
$('to_table tr').click(function(){
var $to = $(this).children('td').children('input[type=checkbox]');
totime = new Date($(this).children('td').eq(1).text()+$(this).children('td').eq(2).text());
});
if(fromtime > totime){
$to.prot('checked','');
alert('時刻はただしくありません');
}
});
});
$('table tr').click(function(){
var $c = $(this).children('td').children('input[type=checkbox]');
$c.prop('checked','checked');
});
$('fromt_table tr').click(function(){
fromtime = new Date($(this).children('td').eq(1).text()+$(this).children('td').eq(3).text());
$('to_table tr').click(function(){
var $to = $(this).children('td').children('input[type=checkbox]');
totime = new Date($(this).children('td').eq(1).text()+$(this).children('td').eq(2).text());
});
if(fromtime > totime){
$to.prot('checked','');
alert('時刻はただしくありません');
}
});
});
こういう書き方だと、もし先に帰りをクリックしたときに、判断ができません。もちろん、逆にもう一度かけばいいですが、もっといい方法がないでしょうか？
どうぞ、よろしくお願いします！
とら さん
11月14日 00時29分
とらさん、こんにちは。
ざっくり見た感じですと、こちらのコード、現時点で「行き」を先にクリックした場合には動作しているのでしょうか？
下記のようなところが少し気になりました。
・fromt_tableや$to.protはタイプミス？
・説明ではラジオボタンですがコード内ではcheckboxになっている
・$('to_tableなどのID指定で#が抜けている
・各clickの閉じ位置もなんだかおかしい？
そのあたりが実際はうまく記述されているとして、想像で意図を読み取ると、次のような感じのプログラムでしょうか。
・trクリック時に、その行のラジオボタンにチェックを付ける
・from_tableのtrクリック時は、時間をfromtimeに代入
・to_tableのtrクリック時は、時間をtotimeに代入（ここで時間をチェック？）
基のコードを尊重するような形として、このような感じではいかがでしょう。
・trクリック時に、その行のラジオボタンにチェックを付ける
・from_tableのtrクリック時は、時間をfromtimeに代入。チェックメソッド呼び出し
・to_tableのtrクリック時は、時間をtotimeに代入。チェックメソッド呼び出し
（コード例
チェックメソッドを別処理にし、from_table, to_tableのどちらがクリックされても呼び出しています。
ただ、個人的にはエラー時にfromtime, to_timeを初期化する処理がいまいちに感じます。
変数に保持せず、イベント発生時にその都度直接fromtime, totimeを取得する方がクールかもしれませんね。応用でできると思いますので、そちらも試してみてはいかがでしょう。
ざっくり見た感じですと、こちらのコード、現時点で「行き」を先にクリックした場合には動作しているのでしょうか？
下記のようなところが少し気になりました。
・fromt_tableや$to.protはタイプミス？
・説明ではラジオボタンですがコード内ではcheckboxになっている
・$('to_tableなどのID指定で#が抜けている
・各clickの閉じ位置もなんだかおかしい？
そのあたりが実際はうまく記述されているとして、想像で意図を読み取ると、次のような感じのプログラムでしょうか。
・trクリック時に、その行のラジオボタンにチェックを付ける
・from_tableのtrクリック時は、時間をfromtimeに代入
・to_tableのtrクリック時は、時間をtotimeに代入（ここで時間をチェック？）
基のコードを尊重するような形として、このような感じではいかがでしょう。
・trクリック時に、その行のラジオボタンにチェックを付ける
・from_tableのtrクリック時は、時間をfromtimeに代入。チェックメソッド呼び出し
・to_tableのtrクリック時は、時間をtotimeに代入。チェックメソッド呼び出し
（コード例
$(document).ready(function() {
var fromtime = '';
var totime = '';
$('table tr').click(function(){
var $c = $(this).children('td').children('input[type=radio]');
$c.prop('checked','checked');
});
$('#from_table tr').click(function(){
// ここでfromtimeに代入処理
// fromtime = xxxxxx;
check(this, 'from');
});
$('#to_table tr').click(function(){
// ここでtotimeに代入する処理
// totime = xxxxxx;
check(this, 'to');
});
function check(element, caller) {
if (fromtime == '' || totime == '') {
return;
}
if (fromtime > totime){
var target = $(element).children('td').children('input[type=radio]');
target.prop('checked','');
if (caller == 'from') {
fromtime = '';
} else if (caller == 'to') {
totime = '';
}
alert('時刻はただしくありません');
}
}
});
var fromtime = '';
var totime = '';
$('table tr').click(function(){
var $c = $(this).children('td').children('input[type=radio]');
$c.prop('checked','checked');
});
$('#from_table tr').click(function(){
// ここでfromtimeに代入処理
// fromtime = xxxxxx;
check(this, 'from');
});
$('#to_table tr').click(function(){
// ここでtotimeに代入する処理
// totime = xxxxxx;
check(this, 'to');
});
function check(element, caller) {
if (fromtime == '' || totime == '') {
return;
}
if (fromtime > totime){
var target = $(element).children('td').children('input[type=radio]');
target.prop('checked','');
if (caller == 'from') {
fromtime = '';
} else if (caller == 'to') {
totime = '';
}
alert('時刻はただしくありません');
}
}
});
チェックメソッドを別処理にし、from_table, to_tableのどちらがクリックされても呼び出しています。
ただ、個人的にはエラー時にfromtime, to_timeを初期化する処理がいまいちに感じます。
変数に保持せず、イベント発生時にその都度直接fromtime, totimeを取得する方がクールかもしれませんね。応用でできると思いますので、そちらも試してみてはいかがでしょう。
馬場誠 さん
11月14日 11時00分
馬場誠 さん こんばんわ
親切に説明してくれて、ありがとうございます。
ご指摘している４っ箇所ですが、確かに、もう一度コードを見てみると、自分の記述ミスでした。すみません。
おっしゃた通りです：
まず、trクリック時に、その行のラジオボタンにチェックを付ける
次は、from_tableのtrクリック時は、時間をfromtimeに代入
最後、to_tableのtrクリック時は、時間をtotimeに代入して、fromtime,totimeを比べてエラーチェックを行います。もし、エラーのときには、エラーメッセージを出す感じです。
教えてくれたプログラムを見てみると、なるほどっていう感じでした。
実は、自分の中で、一番悩んでいました。from_table,to_tableのクリック順番を気にせずに、fromtime,totimeを比べられるか？自分はphpしかできなくで、しかも、中級ぐらいのレベルです、この問題を解決する時には、まず、ｐｈｐ見たいに全局変量がないかと調べました。結果では、javascriptはvarをつけるかどうかで全局変量を設定しているそうです。でも、以下みたいな書き方にすると、$('fromt_table tr').click(function(){｝関数内では、fromtimeはきちんと取れますが、この関数を出ると、取れなくなる。。。。
また別の方法があるとわかりますが、何を調べればいいかわかりませんでした。。。
馬場さんのコードをみると、
このクリックイベントの中に、check関数があって、クリックした度に、チェックするですね、すごく参考になりました。
試してみますので、親切に教えてくれて、本当にありがとうございます！
親切に説明してくれて、ありがとうございます。
ご指摘している４っ箇所ですが、確かに、もう一度コードを見てみると、自分の記述ミスでした。すみません。
おっしゃた通りです：
まず、trクリック時に、その行のラジオボタンにチェックを付ける
次は、from_tableのtrクリック時は、時間をfromtimeに代入
最後、to_tableのtrクリック時は、時間をtotimeに代入して、fromtime,totimeを比べてエラーチェックを行います。もし、エラーのときには、エラーメッセージを出す感じです。
教えてくれたプログラムを見てみると、なるほどっていう感じでした。
実は、自分の中で、一番悩んでいました。from_table,to_tableのクリック順番を気にせずに、fromtime,totimeを比べられるか？自分はphpしかできなくで、しかも、中級ぐらいのレベルです、この問題を解決する時には、まず、ｐｈｐ見たいに全局変量がないかと調べました。結果では、javascriptはvarをつけるかどうかで全局変量を設定しているそうです。でも、以下みたいな書き方にすると、$('fromt_table tr').click(function(){｝関数内では、fromtimeはきちんと取れますが、この関数を出ると、取れなくなる。。。。
var fromtime;
$('fromt_table tr').click(function(){
fromtime = new Date($(this).children('td').eq(1).text()+$(this).children('td').eq(3).text());
});
$('fromt_table tr').click(function(){
fromtime = new Date($(this).children('td').eq(1).text()+$(this).children('td').eq(3).text());
});
また別の方法があるとわかりますが、何を調べればいいかわかりませんでした。。。
馬場さんのコードをみると、
$('#from_table tr').click(function(){
// ここでfromtimeに代入処理
// fromtime = xxxxxx;
check(this, 'from');
});
// ここでfromtimeに代入処理
// fromtime = xxxxxx;
check(this, 'from');
});
このクリックイベントの中に、check関数があって、クリックした度に、チェックするですね、すごく参考になりました。
試してみますので、親切に教えてくれて、本当にありがとうございます！
とら さん
11月15日 22時48分
変数名に$がついていたので、普段PHPを書かれるとのこと、納得です。（実は私もPHPがほとんどなので、意識しないと自然に$を付けてしまいます(^^)
JavaScriptの場合は特に、いろんな書き方ができるため、書く人によってコードがだいぶ異なったりすることがあります。より良い実装方法もあると思いますので、いろいろと試してみるのは勉強になると思います。
また何かありましたら、お気軽にご質問くださいね☆
JavaScriptの場合は特に、いろんな書き方ができるため、書く人によってコードがだいぶ異なったりすることがあります。より良い実装方法もあると思いますので、いろいろと試してみるのは勉強になると思います。
また何かありましたら、お気軽にご質問くださいね☆
馬場誠 さん
11月16日 18時33分
馬場さん、こんばんわ
教えてもらったコードを実行してみたところ、問題なく動きました、プログラムが思った通りに動いて、すごく嬉しかったです。本当に有難うございます。
わかりました、またなんがあったら、是非教えてください。ありがとうです
教えてもらったコードを実行してみたところ、問題なく動きました、プログラムが思った通りに動いて、すごく嬉しかったです。本当に有難うございます。
わかりました、またなんがあったら、是非教えてください。ありがとうです
とら さん
11月16日 23時14分
