0

我正在设计公共汽车的座位安排。我编写了javascript函数来动态创建座位，这样当页面加载时，它就会创建座位。现在我想要一个用户只能选择一个座位的条件。选择一个座位后，如果他点击另一个座位，则必须取消选择前一个座位。下面是我的代码....必须添加什么才能在它们之间切换？

  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

我建议您将单个事件绑定到父容器并使用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()将类似于您在上面编写的代码，但没有 onClick 处理程序并考虑到selected_seat_id绘制可用/占用座位。还要data-seat_id在循环中设置属性。

于 2013-10-01T04:24:43.077 回答