午前の続き
セレクトの中を動かしたらconsoleに配列がきました
では.doneの中を整える
divを生成してtextで座席番号を入れる
reserveが1か0かみて
1ならresevedを、0ならempをクラスにつける。attrでやる
最後にアペンドする
それを20回ループ
将来座席数が変わるかもだから
i<d.length
としておく
seat_idがあるはずだから
それで書き出したい
受け取ったdは配列になっている
ｄの配列にアクセス→
d
ｄの何番にアクセスしたい→
d[1]
ループで回ってるからiですむ→
d[i]
オブジェクトはプロパティと値をもっている→
d[i].seat_id
これを書き出す
条件によって分岐させたい
いま受け取ったi番目のデータのreservedの値が
1の場合と0の場合で
elehoge.attr('class','reserved');
付与するのはクラスをつくって中身はリザーブド
.done(function(d){
//console.log(d);
for(i=0; i<d.length; i++){
var elehoge = $('<div>').text(d[i].seat_id);
//予約済みか
if(d[i].reserved == 1){
//予約済みクラスを付与
elehoge.attr('class','reserved');
}else{
//まだ空ですよ
elehoge.attr('class','emp');
}
$('#bus').append(elehoge);
}
バスでやってるけどコンサートでも映画館でも他の乗り物でも応用が効く
これ3/14、3/15、3/14とやるとどんどんバスが伸びるね？
どうしてでしょう
どうしてこういうことが起きるのか
そりゃそうだ。通信するたびに要素をつけたしてるはずだ
どう回避したらいいんだろう
通信が起こって書き出される前に一回リセットを入れたらいい
→親要素である#busの中身をエンプティにする
$('#bus').empty();
こうすると中身がからになってリセットされるのでdoneの最初に置く
.done(function(d){
//console.log(d);
$('#bus').empty();
for(i=0; i<d.length; i++){
var elehoge = $('<div>').text(d[i].seat_id);
//予約済みか
if(d[i].reserved == 1){
//予約済みクラスを付与
elehoge.attr('class','reserved');
}else{
//まだ空ですよ
elehoge.attr('class','emp');
}
$('#bus').append(elehoge);
}
空いてるところをクリックできるようにしたい
empクラスになっているdivだけはクリッカブルにする
スタイルシートで
cursor:pointer;
クリックしたところは色を付けたい
→
seat.jsでクリック時のイベントを予約したい
普通の他のプログラム言語だったら$('#ymd').on('change',function(){とは
別のイベントを作って書きそうなものだ
しかし読み込み時にはそれがない
だから無効になってしまう
empクラスのdivはチェンジイベントが起こったときにはじめて出現する
要素がないときに言ってもだめだし後からできたものに対してもスルーされる
よって、チェンジイベントの「中で」記述する
doneのなかの最後に記述
$('#bus div.emp').on('click',function(){
});
背景が白だったら緑にしたいし逆なら白に戻したい
if($(this).css('background-color')=='#afa'){
$(this).css('background','#afa');
}else{
$(this).css('background','#fff');
}
しかしこれは動かないコード
console.log($(this).css('background-color'));
で実際値を拾ってみましょう
この方式で記述する必要がある
seat.js
$(function(){
//console.log("hoge");
$('#ymd').on('change',function(){
$.ajax({
url:'api/get_seat.php',
type:'get',
data:{'ymd':$('#ymd').val()},
dataType:'json',
})
.done(function(d){
//console.log(d);
$('#bus').empty();
for(i=0; i<d.length; i++){
var elehoge = $('<div>').text(d[i].seat_id);
//予約済みか
if(d[i].reserved == 1){
//予約済みクラスを付与
elehoge.attr('class','reserved');
}else{
//まだ空ですよ
elehoge.attr('class','emp');
}
$('#bus').append(elehoge);
}
/*空席のクリック*/
$('#bus div.emp').on('click',function(){
//背景色を変える
console.log($(this).css('background-color'));
if($(this).css('background-color')=='rgb(255, 255, 255)'){
$(this).css('background','#afa');
}else{
$(this).css('background','#fff');
}
});
})
.fail(function(){
alert('NG');
});
});
});
ひとりぶんはこの後の処理楽らしいが
複数人だと配列にいれなきゃだし
配列はajaxで直接送れないので細工が必要になったりするらしい
あらかじめ配列を作っておきたい
var seats = [];//配列
for文のなかで回したときにまず埋まってる/いないを配列に入れたい
.done(function(d){
//console.log(d);
$('#bus').empty();
var seats = [];//配列
for(i=0; i<d.length; i++){
seats[d[i].seat_id] = d[i].reserved;
console.log(seats);
はいった
しかし人の予約まで自分がしたことになってしまうので
これではだめらしい
for(i=0; i<d.length; i++){
seats[d[i].seat_id] = 0;//予約まだしていません
console.log(seats);
どの座席もクリックしてないことにしておいて、
ifのなかに追加
