seatCharts 地铁选座重新加载座位

最新推荐文章于 2024-08-08 08:12:24 发布

不会功夫的茶

最新推荐文章于 2024-08-08 08:12:24 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： seatCharts 地铁选座重新加载座位

本文链接：https://blog.csdn.net/qq_36986305/article/details/81630235

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

修改js源码开头部分

<!doctype html>
<html>
<head>
<title>jQuery在线选座位插件seat-charts - 脚本之家</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
  <div class="container">
    <div id="seat-map">
     
    </div>
   
  </div>
</div>
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/jquery.seat-charts.min.js"></script> 
<script>
			var firstSeatLabel = 1;
			
						function test1(){
				map=['ee_ee',
						'ee_ee',
						'ee_ee',];
						a(map);
			}
			function test2(){
				map=['ee_ee',
						'ee_ee',
						'ee_ee','ee_ee',
						'ee_ee',];
						a(map);
			}
		function a(map){
			console.log(map)
				var $cart = $('#selected-seats'),
					$counter = $('#counter'),
					$total = $('#total'),
					sc = $('#seat-map').seatCharts({
					map: map,
					seats: {
						f: {
							price   : 100,
							classes : 'first-class', //your custom CSS class
							category: '头等舱'
						},
						e: {
							price   : 40,
							classes : 'economy-class', //your custom CSS class
							category: '经济舱'
						}					
					
					},
					naming : {
						top : false,
						getLabel : function (character, row, column) {
							return firstSeatLabel++;
						},
					},
					legend : {
						node : $('#legend'),
					    items : [
							[ 'f', 'selected',   '已选中' ],
							[ 'e', 'available',   '可选'],
							[ 'f', 'unavailable', '不可选']
					    ]					
					},
					click: function () {
						if (this.status() == 'available') {
							$('<li>'+this.data().category+this.settings.label+'号座位'+'：<br/>价格：<b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[删除]</a></li>')
								.attr('id','cart-item-'+this.settings.id)
								.data('seatId', this.settings.id)
								.appendTo($cart);
							$counter.text(sc.find('selected').length+1);
							$total.text(recalculateTotal(sc)+this.data().price);
							
							return 'selected';
						} else if (this.status() == 'selected') {
							//update the counter
							$counter.text(sc.find('selected').length-1);
							//and total
							$total.text(recalculateTotal(sc)-this.data().price);
						
							//remove the item from our cart
							$('#cart-item-'+this.settings.id).remove();
						
							//seat has been vacated
							return 'available';
						} else if (this.status() == 'unavailable') {
							//seat has been already booked
							return 'unavailable';
						} else {
							return this.style();
						}
					}
				});

				//this will handle "[cancel]" link clicks
				$('#selected-seats').on('click', '.cancel-cart-item', function () {
					//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
					sc.get($(this).parents('li:first').data('seatId')).click();
				});

				//let's pretend some seats have already been booked
				sc.get(['1_2']).status('unavailable');
		

		}

		function recalculateTotal(sc) {
			var total = 0;
		
			//basically find every selected seat and sum its price
			sc.find('selected').each(function () {
				total += this.data().price;
			});
			
			return total;
		}
		
		</script>

<div>
 <div class="booking-details">
      <h3>已选中的座位 (<span id="counter">0</span>):</h3>
    <!--   <ul id="selected-seats">
      </ul> -->
      <p>总价: <b>$<span id="total">0</span></b></p>
      <p><button class="checkout-button">结算</button></p>      
      <div id="legend"></div>
	  <button type="button"  onclick="test1()">切换</button>
	  <button type="button"  onclick="test2()">切换2</button>
    </div>
</div>
</body>
</html>