0

バスの座席配置を設計しています。ページが読み込まれると座席が作成されるように、座席を動的に作成する JavaScript 関数を作成しました。ここで、ユーザーが 1 つの座席のみを選択できる条件が必要です。1 つの座席を選択した後、別の座席をクリックした場合は、前の座席の選択を解除する必要があります。以下は私のコードです....それらを切り替えるには何を追加する必要がありますか?

  function createSeats(oSeatsContainer,seatsPerRow,rowNumber){
            for(i=0; i < rowNumber; i++){
                var oRow = document.createElement('tr');
                    for(j=1; j <= seatsPerRow; j++){
                    oCell = document.createElement('td');
                    var oImg = document.createElement('img');
                    oImg.src = statusPics['avail'].src;
                    oImg.status = 'avail';
                    oImg.id = (i*10)+j;
                    oImg.onclick=function(){
                        this.status = (this.status == 'avail')? 'mine' : 'avail';
                        this.src = (this.status == 'avail')? statusPics['avail'].src : statusPics['mine'].src;
                        oTotalprice.innerHTML = '';
                        oBookedSeatNos.innerHTML = '';
                        oBtnCheckout.disabled = true;
                    }
                    oCell.appendChild(oImg);
                    oRow.appendChild(oCell);
                }
                oSeatsContainer.appendChild(oRow);
            }
        }
4

1 に答える 1

1

単一のイベントを親コンテナにバインドし、.xml を使用してターゲット要素を取得することをお勧めしますe.target。個々の座席に属性を追加して、data-seat_idそれらを一意に識別することができます。

var selected_seat_id;

oSeatsContainer.onClick = function(e) {
  selected_seat_id = e.target.getAttribute("data-seat_id");
  drawSeats();
}

drawSeats();

drawSeats()selected_seat_id上記のコードに似ていますが、onClick ハンドラーがなく、利用可能な/取得済みの座席を描画することを考慮しています。またdata-seat_id、ループ内で属性を設定します。

于 2013-10-01T04:24:43.077 に答える