Question

我正在为公共汽车设计座位安排。我已经编写了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);
            }
        }

Answer 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属性。

使用javascript在座位之间切换

1 个答案: