20个原生jsdemo：2 movie-seat-booking

HTML

• movie 电影数据
• container 座位容器，用来提交座位数据
• seats 座位数据
• count 
• total

通过select标签选择电影数据；通过给座位div设计点击事件，来更新座位的数据，然后返回相应的count与total在页面上

CSS

主要需要修改点击后的seats主题

JS

 1 populiateUI()//初始化界面 将座位表数据呈现出来
 2 setMovieData(movieIndex, moviePrice) //在localStorage中设置电影数据
 3 updateSelectedCount() //更新total和count 同时维护一个与seat数据有关的表存储在localStorage
 4 /**selectedSeats是所有class为".row .seat.selected"的div数组，
 5    * 通过map给其按顺序给予index并返回数组——将selected中的seat作为参数传入，在seats中找到seat的index
 6    * 并返回通过键值对记录。
 7    * 将已选座位的index和其对应的seat元素对象保存在浏览器中
 8    * */
 9   // console.log(selectedSeats);
10   // console.log([...selectedSeats]);
11   //selectedSeats中是seat元素，在seats中找到seat的index存入一个数组中作为已选的seat返回

1. 首先是设置电影数据存入localStorage中

2. 给seat设置点击事件

3. 更新已选电影的count和total，选择出所有class "row"中的"seat.selected"；从seat中找到已选seat的index形成键值对存入localStorage中

4. 根据已选座位表来为已选择座位改变class （classList. toogle()）

标签：count,index,20,movie,seat,seats,座位,已选
来源： https://www.cnblogs.com/yukinon/p/15291095.html