バス座席地図

-4

Full-featured Seating Chart Plugin With jQuery - Seat Charts バス座席地図

誰かがチャートに表示された座席のいずれかを選択せずに、それをクリックしようとすると、現在、このコードでは、チェックアウトボタンが機能しています。したがって、誰かが座席を選択して座席を選択してから表示されるまで、チェックアウトボタンを消すように制限したいと思います。

出典

2017-10-30 Anu

を - **あなたは**それを書くのですか？ –

こんにちはと歓迎するスタックオーバーフロー。ここでは、問題を解決するために自分自身で作成しようとしたコードと、発生しているエラーとそれを修正しようとしたことを示してください。次に、プログラムをデバッグして動作させることができます。だから、あなたの質問を編集して、実際の*関連するコードスニペットを追加してください:) –

-1

アヌ、

はこれを見てい：面白いプラグインの

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>jQuery Seat Charts Plugin Demo</title> 
 
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
 
<link rel="stylesheet" type="text/css" href="jquery.seat-charts.css"> 
 
<script type="text/javascript"> 
 
function toggleCheckoutButtonState() 
 
{ 
 
\t var isSeatSelected= $("#seat-map [aria-checked='true'").length>0; 
 
\t if(isSeatSelected) 
 
\t \t \t $("#btnCheckout").removeAttr("disabled"); 
 
\t else 
 
\t \t \t $("#btnCheckout").attr("disabled",true); 
 
} 
 
</script> 
 
<style> 
 
body { 
 
\t font-family: 'Roboto', sans-serif; 
 
    background-color:#fafafa; 
 
} 
 
a { 
 
\t color: #b71a4c; 
 
} 
 
.front-indicator { 
 
\t width: 145px; 
 
\t margin: 5px 32px 15px 32px; 
 
\t background-color: #f6f6f6; \t 
 
\t color: #adadad; 
 
\t text-align: center; 
 
\t padding: 3px; 
 
\t border-radius: 5px; 
 
} 
 
.wrapper { 
 
\t width: 100%; 
 
\t text-align: center; 
 
    margin-top:150px; 
 
} 
 
.container { 
 
\t margin: 0 auto; 
 
\t width: 500px; 
 
\t text-align: left; 
 
} 
 
.booking-details { 
 
\t float: left; 
 
\t text-align: left; 
 
\t margin-left: 35px; 
 
\t font-size: 12px; 
 
\t position: relative; 
 
\t height: 401px; 
 
} 
 
.booking-details h2 { 
 
\t margin: 25px 0 20px 0; 
 
\t font-size: 17px; 
 
} 
 
.booking-details h3 { 
 
\t margin: 5px 5px 0 0; 
 
\t font-size: 14px; 
 
} 
 
div.seatCharts-cell { 
 
\t color: #182C4E; 
 
\t height: 25px; 
 
\t width: 25px; 
 
\t line-height: 25px; 
 
\t 
 
} 
 
div.seatCharts-seat { 
 
\t color: #FFFFFF; 
 
\t cursor: pointer; \t 
 
} 
 
div.seatCharts-row { 
 
\t height: 35px; 
 
} 
 
div.seatCharts-seat.available { 
 
\t background-color: #B9DEA0; 
 

 
} 
 
div.seatCharts-seat.available.first-class { 
 
/* \t background: url(vip.png); */ 
 
\t background-color: #3a78c3; 
 
} 
 
div.seatCharts-seat.focused { 
 
\t background-color: #76B474; 
 
} 
 
div.seatCharts-seat.selected { 
 
\t background-color: #E6CAC4; 
 
} 
 
div.seatCharts-seat.unavailable { 
 
\t background-color: #472B34; 
 
} 
 
div.seatCharts-container { 
 
\t border-right: 1px dotted #adadad; 
 
\t width: 200px; 
 
\t padding: 20px; 
 
\t float: left; 
 
} 
 
div.seatCharts-legend { 
 
\t padding-left: 0px; 
 
\t position: absolute; 
 
\t bottom: 16px; 
 
} 
 
ul.seatCharts-legendList { 
 
\t padding-left: 0px; 
 
} 
 
span.seatCharts-legendDescription { 
 
\t margin-left: 5px; 
 
\t line-height: 30px; 
 
} 
 
.checkout-button { 
 
\t display: block; 
 
\t margin: 10px 0; 
 
\t font-size: 14px; 
 
} 
 
#selected-seats { 
 
\t max-height: 90px; 
 
\t overflow-y: scroll; 
 
\t overflow-x: none; 
 
\t width: 170px; 
 
} 
 
</style> 
 
</head> 
 

 
<body><div id="jquery-script-menu"> 
 
<div class="jquery-script-center"> 
 
<ul> 
 
<li><a href="http://www.jqueryscript.net/chart-graph/Full-featured-Seating-Chart-Plugin-With-jQuery-Seat-Charts.html">Download This Plugin</a></li> 
 
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li> 
 
</ul> 
 
<div class="jquery-script-ads"><script type="text/javascript"><!-- 
 
google_ad_client = "ca-pub-2783044520727903"; 
 
/* jQuery_demo */ 
 
google_ad_slot = "2780937993"; 
 
google_ad_width = 728; 
 
google_ad_height = 90; 
 
//--> 
 
</script> 
 
<script type="text/javascript" 
 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
 
</script></div> 
 
<div class="jquery-script-clear"></div> 
 
</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="container"> 
 
    <h1>jQuery Seat Charts Plugin Demo</h1> 
 
    <div id="seat-map" onclick="toggleCheckoutButtonState()"> 
 
     <div class="front-indicator">Front</div> 
 
    </div> 
 
    <div class="booking-details"> 
 
     <h2>Booking Details</h2> 
 
     <h3> Selected Seats (<span id="counter">0</span>):</h3> 
 
     <ul id="selected-seats"> 
 
     </ul> 
 
     Total: <b>$<span id="total">0</span></b> 
 
     <button id="btnCheckout" disabled="true" class="checkout-button">Checkout &raquo;</button> 
 
     <div id="legend"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="jquery.seat-charts.js"></script> 
 
<script> 
 
\t \t \t var firstSeatLabel = 1; 
 
\t \t 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t var $cart = $('#selected-seats'), 
 
\t \t \t \t \t $counter = $('#counter'), 
 
\t \t \t \t \t $total = $('#total'), 
 
\t \t \t \t \t sc = $('#seat-map').seatCharts({ 
 
\t \t \t \t \t map: [ 
 
\t \t \t \t \t \t 'ff_ff', 
 
\t \t \t \t \t \t 'ff_ff', 
 
\t \t \t \t \t \t 'ee_ee', 
 
\t \t \t \t \t \t 'ee_ee', 
 
\t \t \t \t \t \t 'ee___', 
 
\t \t \t \t \t \t 'ee_ee', 
 
\t \t \t \t \t \t 'ee_ee', 
 
\t \t \t \t \t \t 'ee_ee', 
 
\t \t \t \t \t \t 'eeeee', 
 
\t \t \t \t \t ], 
 
\t \t \t \t \t seats: { 
 
\t \t \t \t \t \t f: { 
 
\t \t \t \t \t \t \t price : 100, 
 
\t \t \t \t \t \t \t classes : 'first-class', //your custom CSS class 
 
\t \t \t \t \t \t \t category: 'First Class' 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t e: { 
 
\t \t \t \t \t \t \t price : 40, 
 
\t \t \t \t \t \t \t classes : 'economy-class', //your custom CSS class 
 
\t \t \t \t \t \t \t category: 'Economy Class' 
 
\t \t \t \t \t \t } \t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t naming : { 
 
\t \t \t \t \t \t top : false, 
 
\t \t \t \t \t \t getLabel : function (character, row, column) { 
 
\t \t \t \t \t \t \t return firstSeatLabel++; 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t legend : { 
 
\t \t \t \t \t \t node : $('#legend'), 
 
\t \t \t \t \t  items : [ 
 
\t \t \t \t \t \t \t [ 'f', 'available', 'First Class' ], 
 
\t \t \t \t \t \t \t [ 'e', 'available', 'Economy Class'], 
 
\t \t \t \t \t \t \t [ 'f', 'unavailable', 'Already Booked'] 
 
\t \t \t \t \t  ] \t \t \t \t \t 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t click: function() { 
 
\t \t \t \t \t \t if (this.status() == 'available') { 
 
\t \t \t \t \t \t \t //let's create a new <li> which we'll add to the cart items 
 
\t \t \t \t \t \t \t $('<li>'+this.data().category+' Seat # '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>') 
 
\t \t \t \t \t \t \t \t .attr('id', 'cart-item-'+this.settings.id) 
 
\t \t \t \t \t \t \t \t .data('seatId', this.settings.id) 
 
\t \t \t \t \t \t \t \t .appendTo($cart); 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t /* 
 
\t \t \t \t \t \t \t * Lets update the counter and total 
 
\t \t \t \t \t \t \t * 
 
\t \t \t \t \t \t \t * .find function will not find the current seat, because it will change its stauts only after return 
 
\t \t \t \t \t \t \t * 'selected'. This is why we have to add 1 to the length and the current seat price to the total. 
 
\t \t \t \t \t \t \t */ 
 
\t \t \t \t \t \t \t $counter.text(sc.find('selected').length+1); 
 
\t \t \t \t \t \t \t $total.text(recalculateTotal(sc)+this.data().price); 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t return 'selected'; 
 
\t \t \t \t \t \t } else if (this.status() == 'selected') { 
 
\t \t \t \t \t \t \t //update the counter 
 
\t \t \t \t \t \t \t $counter.text(sc.find('selected').length-1); 
 
\t \t \t \t \t \t \t //and total 
 
\t \t \t \t \t \t \t $total.text(recalculateTotal(sc)-this.data().price); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t //remove the item from our cart 
 
\t \t \t \t \t \t \t $('#cart-item-'+this.settings.id).remove(); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t //seat has been vacated 
 
\t \t \t \t \t \t \t return 'available'; 
 
\t \t \t \t \t \t } else if (this.status() == 'unavailable') { 
 
\t \t \t \t \t \t \t //seat has been already booked 
 
\t \t \t \t \t \t \t return 'unavailable'; 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t return this.style(); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 

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

 
\t \t \t \t //let's pretend some seats have already been booked 
 
\t \t \t \t sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable'); 
 
\t \t 
 
\t \t }); 
 

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

 
    var _gaq = _gaq || []; 
 
    _gaq.push(['_setAccount', 'UA-36251023-1']); 
 
    _gaq.push(['_setDomainName', 'jqueryscript.net']); 
 
    _gaq.push(['_trackPageview']); 
 

 
    (function() { 
 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
 
    })(); 
 

 
</script> 
 
</body> 
 
</html>

出典

2017-10-30 05:03:12 virtualsante

それはどうしますか？それはどのように質問に答えますか？コードをばらまくだけではありません。あなた自身を説明してください！ https://stackoverflow.com/help/how-to-answer – Rob

トピックの質問に答えないでください。よく聞かれる質問に答えてくださいすべての質問がここで答えられるはずです。あなた自身の不満を解消し、必要に応じてコードやマークアップを提供しない質問に答えるのを避けてください。 https://stackoverflow.com/help/how-to-answer – Rob

本当に有益な答えをありがとう – Anu

答えて

関連する問題