電影院選座 · vue

# 座位選擇，點擊一次選擇，再次點擊取消選擇 ``` <style> ul,li{ margin:0; padding:0; list-style: none; } ul{ width:560px; border:3px solid #eee; margin:0 auto; } li{ width:80px; height:40px; background: #ccc; border:1px solid #abc; float:left; margin:5px; cursor:pointer; } div{ width:280px; height:90px; border:1px solid #ccc; margin: 0 auto; text-align: center; line-height: 90px; color:#333; } .click{ font-size:10px; text-align:center; line-height: 40px; font-family: '仿宋'; font-weight: bold; color:#333; background: orange; border:1px solid red; } </style> </head> <body> <ul> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <p style="clear:both;"></p> <div>屏幕中央</div> </ul> <script> // 邏輯：沒有click類的時候，進行添加，同時對文本進行賦值；反之，清空click類，同時文本值為空 let lis = document.getElementsByTagName('li'); for(let i=0;i<lis.length;i++){ lis[i].onclick = function(){ let res = this.getAttribute('class'); if(!res){ this.setAttribute('class','click'); this.innerText = '座位已選'; }else{ this.setAttribute('class',''); this.innerText = ''; } } } </script> ``` 效果圖： ![](https://img.kancloud.cn/09/1f/091f3f7c073dd4044cbe486e5944eba9_683x482.png)