HTML5与JQuery混合应用：选座功能逻辑简单实现

本文链接：https://blog.csdn.net/cordova/article/details/50853411

1.功能目标：

假设为了实现一个选座功能，用HTML5和JQuery来实现：

1）首先要将座位分布画出来，但往往是大量的座位，因此要借助JQuery语句通过循环来实现；

2）然后用户点击其中一个座位后，要得到该座位的横纵坐标，这个要借助index()实现；

3）另外要可以根据坐标找到相应的座位标签，并修改其中的内容；

2.二维数组数据：

这是一个20x30的座位分布（具体应用时将20和30行列数写成两个变量），30行，每行20列，首先用一个二维数组记录每个座位的状态:

//0表示这个位置没有座位

//1可选表示空位

//2表示被别人占位

//3表示自己选中的座位

首先初始化二维数组是状态全部为1,空位：

var seatArray = new Array();
for(var i=0;i<30;i++){//一维数组长度为30
  seatArray[i]=new Array();
  for(var j=0;j<20;j++){//第二维长度为20
    seatArray[i][j]=1;
  }
}

然后根据实际设置其他特殊状态：

//设置没有座位的状态
seatArray[1][5]=0;
//设置被人占得位置
seatArray[12][13]=2;

3.HTML5以及JQuery画图：

i. 开始画座位图，首先body中用一个div来装所有的内容;

ii.

然后循环在div中放入30行每行20列的座位(开始暂时全部初始化为空位图片);

iii.

选择器根据坐标找标签;

iv. 然后根据二维数组的实际状态，修改其中的特殊位置;

//初始化特殊位置：没有座位的，和被占的
for(var i=0;i<30;i++){
  for(var j=0;j<20;j++){
  //没有座位的
  if(seatArray[i][j]==0)
  $('#seats >ul').eq(i).children().eq(j).replaceWith(...);
  //已经被别人占的
  if(seatArray[i][j]==2)
  $('#seats >ul').eq(i).children().eq(j).replaceWith(...);
  }
}

＊这里面有一个难点就是要根据二维坐标找到指定的座位标签并将其替换掉：

通过JQuery语句 $('#seats>ul').eq(i).children().eq(j)可以找到div下的第i个ul（第i行）中的第j个li（第j列），然后使用其replaceWith函数替换掉这个li标签就可以实现相应坐标的座位图片的替换更改；

4.点击事件找二维坐标：

最后要实现用户的座位选择功能，用户点击某个座位，我们要响应事件得到该座位的二维坐标并进行相应的事件处理：

纵坐标：用户点击的是一个里层li标签，所以列号即纵坐标为：$(this).index()，这个从0开始，其实就是ul中li的序号；

横坐标：然后是行号横坐标，应该是li的父节点ul的序号，但ul不是最里层的，是从内到外第二层所以序号增幅不是1，是2，【可以理解为Jquery的index()函数的增幅和第几代有关，在最里层也就是最后一代没有子节点增幅是1，倒数第几代增幅就是几，这个实际编程的时候打印一下调整即可】因此横坐标应为：$(this).parent().index()/2

有了二维坐标就可实现了，对每一个li定义点击事件：

$("ul li").click(function(){
var row = $(this).parent().index()/2;
var col = $(this).index();
  alert('第'+row+'行 第'+col+'列');
  $(this).replaceWith(...);//替换为选中的图片
  seatArray[row][col] =3;//更新自己选定的数组位置状态
});

Demo下载：http://download.csdn.net/detail/cordova/9642243

示例Demo源码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=3.0,minimum-scale=0.3,user-scalable=1,initial-scale=0.5"/>

	<title>JQ选座Demo</title>
	
	<style>  
        html {  
        margin:0px;  
        padding:0px;  
        }  
        body {  
        padding:0px;  
        margin: 0px;  
        width: 750px;  
        }  
        ul {  
        padding:0px;  
        list-style: none;/*去掉ul样式*/  
        }  
        ul li {  
        float:left;/*使li水平平铺*/  
        }

        /*为奇数的li*/  
        ul li:nth-child(odd) {
        } 
        /*椅子的样式*/  
        ul[name = "chair"] li img {  
        height: 16px;/*位置宽高*/  
        width: 16px;  
        }  
        /*每行第一个椅子*/  
        ul[name = "chair"] li:first-child img {  
        margin-left:20px;  
        }  
        /*奇数椅子*/  
        ul[name = "chair"] li:nth-child(2n+3) img {  
        margin-left:30px;/*异桌椅子之间的距离*/  
        }  
        /*偶数椅子*/  
        ul[name = "chair"] li:nth-child(even) img {  
        margin-left:10px;/*同桌椅子之间的距离*/  
        }  
    </style>
</head>

<body>
	<!--30行20列-->  
    <div id="seats"></div> 
</body>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
	//$(ul).width = window.screen.width;  

    //定义座位二维数组  
    //0表示这个位置没有座位  
    //1可选表示空位  
    //2表示被别人占位  
    //3表示自己选中的座位  
    var seatArray = new Array();  
    for(var i=0;i<30;i++){//一维数组长度为30  
        seatArray[i]=new Array();  
        for(var j=0;j<20;j++){//第二维长度为20  
            seatArray[i][j]=1;
        }
    }  
    //设置空位  
    seatArray[1][5]=0;  
    //设置被人占得位置  
    seatArray[12][13]=2;

    //添加30行li  
    for(var v=0;v<30;v++){  
        $('#seats').append(
            '<ul name = "chair">'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
                '<li><img src="image/seat/seat_sale.png"/></li>'+  
            '</ul>'+'<br/>')
    }

    //初始化特殊位置：没有座位的，被占的  
    for(var i=0;i<30;i++){
        for(var j=0;j<20;j++){
        //没有座位
        if(seatArray[i][j]==0)  
            $('#seats >ul[name = "chair"]').eq(1).children().eq(j).replaceWith('<li><img src="image/seat/seat_empty.png"/></li>');  
        //已经被别人占  
        if(seatArray[i][j]==2)  
            $('#seats >ul[name = "chair"]').eq(i).children().eq(j).replaceWith('<li><img src="image/seat/seat_sold.png"/></li>')  
        }
    }

    //行号：parseInt($(this).parent().index()/2)  
    //列号：$(this).index()
    $("ul[name = 'chair'] li").click(function(){  
    var row = parseInt($(this).parent().index()/2);  
    var col = $(this).index();
    //报行列号  
    alert('第'+row+'行  第'+col+'列');
    // 如果可选则更新状态
    if (seatArray[row][col] == 1) {
        $(this).replaceWith('<li><img src="image/seat/seat_selected.png"/></li>');//更换图片  
       seatArray[row][col] = 3;//更新自己选定的数组位置状态 
    }else{
        alert("作为已被占或不存在该座位！");
    }
        
     }); 
</script>

</html>