大佬教程收集整理的这篇文章主要介绍了HTML5与JQuery混合应用:选座功能逻辑简单实现,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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; } }
//初始化特殊位置:没有座位的,和被占的 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(...); } }
$("ul li").click(function(){ var row = $(this).parent().index()/2; var col = $(this).index(); alert('第'+row+'行 第'+col+'列'); $(this).replaceWith(...);//替换为选中的图片 seatArraY[row][col] =3;//更新自己选定的数组位置状态 });
<!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>
以上是大佬教程为你收集整理的HTML5与JQuery混合应用:选座功能逻辑简单实现全部内容,希望文章能够帮你解决HTML5与JQuery混合应用:选座功能逻辑简单实现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。