高度(14) 予約システム(5)

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/04/30 04:37

高度(14) 予約システム(5)

seatsはグローバルに移動します

ローカルじゃだめでした

ここまで
　

seat.js

$(function(){
//console.log("hoge");
var seats = [];//配列

$('#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++){
    seats[d[i].seat_id] = 0;//予約まだしていません
    console.log(seats);

    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'));
    var num = $(this).text();//クリックされた要素に何の座席番号が記述してあるか取得

    //背景色を変え座席番号を取得し配列に入れる
    if($(this).css('background-color')=='rgb(255, 255, 255)'){
     $(this).css('background','#afa');
     seats[num] = 1;
    }else{
     $(this).css('background','#fff');
     seats[num] = 0;
    }
   });

})
.fail(function(){
   alert('NG');
});
});

//決定ボタンを押したとき
$('#b1').on('click',function(){
console.log(seats);
});

});

これでどこが自分が申し込んだ席かは分かった

これをpostできれば楽ちんなんだが

配列、奥行のある情報は送れない

よってカンマ区切りのテキストに直したい

受け取ったphp側でまたそれを配列に組み立てなおす

これをもとに予約番号だけを取り出す

//決定ボタンを押したとき
$('#b1').on('click',function(){
console.log(seats);

//配列はそのままで送れないので文字列づくり
var seatStr = "";//初期値は空文字
for(var i=1; i<seats.length ; i++){//座席番号は1から始まるが勝手に0番が付与されているので-1する
   if(seats[i]==1){//席が予約されていたら
    seatStr += i + ',';//席番号とカンマをつなげていく。予約席番だけが追加される
   }
}
console.log(seatStr);