【发布时间】：2022-01-19 13:21:51
【问题描述】：
任何人都可以帮助我按照以下要求将我当前的代码更改为：
- 创建一个程序，显示座位安排，如果座位 已经被占用了。
- 在座位安排上方，将当前预订状态注明给 “未预订”。
- 鼠标悬停在单个座位上时，座位的当前状态 将在上面显示。如果座位已被占用，则座位 应该是灰色的，鼠标悬停在当前状态应该显示 “采取”。
- 选择可用座位会将座位颜色更改为 绿色。选择 2 个座位后，将烹饪状态更改为“已预订”。和 两个座位都应该是灰色的。
提前非常感谢您！当我点击确认预订时，座位似乎没有变灰。
$(function () {
$(".place").click(function () {
$(this).toggleClass("active");
});
$(".unbooked").attr("title","Unbooked");
$(".taken").attr("title","Taken");
});
$("#submit").click(function () {
$(".place").each(function () {
if ($(this).hasClass("active")) {
$(this).addClass("taken");
$(this).removeClass("unbooked");
$(this).attr("title","Taken");
alert("Seats booked: " + $(this).text())
}
});
});
const container = document.querySelector('.container')
const seats = document.querySelectorAll('.row .seat:not(.occupied)')
const count = document.getElementById('count')
container.addEventListener('click', function (e) {
console.log(e.target)
if (
e.target.classList.contains('seat') &&
!e.target.classList.contains('occupied')
) {
console.log(e.target)
e.target.classList.toggle('selected')
updateSelectedCount()
}
})
function updateSelectedCount() {
const selectedSeats = document.querySelectorAll('.row .seat.selected')
const selectedSeatsCount = selectedSeats.length
count.innerText = selectedSeatsCount
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #242333;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.order,
.result {
float: right;
width: 20%;
}
.movie-container {
margin: 20px 0;
}
.movie-container select {
background-color: #fff;
border-radius: 5px;
border: none;
font-size: 14px;
margin-left: 10px;
padding: 5px 15px;
outline: none;
}
.seat {
background-color: #198bad;
height: 19px;
width: 20px;
margin: 3px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.seat.selected {
background-color: #16df16;
}
.seat.occupied {
background-color: grey;
}
.seat:nth-of-type(2) {
margin-right: 18px;
}
.seat:nth-last-of-type(2) {
margin-left: 18px;
}
.seat:not(.occupied):hover {
cursor: pointer;
transform: scale(1.2);
}
.showcase .seat:not(.occupied):hover {
cursor: default;
transform: scale(1);
}
.showcase {
background-color: rgba(0, 0, 0, 0.1);
padding: 5px 10px;
border-radius: 5px;
color: #777;
list-style: none;
display: flex;
justify-content: space-between;
}
.showcase li {
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.showcase li small {
margin-left: 2px;
}
.row {
display: flex;
}
.screen {
background-color: #fff;
height: 70px;
width: 100%;
margin: 15px 0;
transform: rotateX(-45deg);
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}
.container {
perspective: 1000px;
margin-bottom: 30px;
}
p.text {
margin: 5px 0;
}
p.text span {
color: #6feaf6;
}
.active {
background: green;
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Q7.css" />
<title>Movie Seat Booking</title>
</head>
<body>
<div class="movie-container">
<label> Avaliable screenings</label>
<select id="movie">
<option>Steve To The Rescue</option>
</select>
</div>
<ul class="showcase">
<li>
<div class="seat"></div>
<small>N/A</small>
</li>
<li>
<div class="seat selected"></div>
<small>Selected</small>
</li>
<li>
<div class="seat occupied"></div>
<small>Occupied</small>
</li>
</ul>
<div class="container">
<div class="screen"></div>
<div class="row">
<div class="col col-lg-1 place mx-auto unbooked seat"> A1</div>
<div class="col col-lg-1 place mx-auto unbooked seat"> A2</div>
<div class="col col-lg-1 place mx-auto unbooked seat"> A3</div>
<div class="col col-lg-1 place mx-auto unbooked seat"> A4</div>
<div class="col col-lg-1 place mx-auto unbooked seat"> A5</div>
</div>
<div class="row">
<div class="col col-lg-1 place mx-auto unbooked seat">B1</div>
<div class="col col-lg-1 place mx-auto unbooked seat">B2</div>
<div class="col col-lg-1 place mx-auto taken occupied seat">B3</div>
<div class="col col-lg-1 place mx-auto taken occupied seat">B4</div>
<div class="col col-lg-1 place mx-auto unbooked seat">B5</div>
</div>
<div class="row">
<div class="col col-lg-1 place mx-auto unbooked seat">C1</div>
<div class="col col-lg-1 place mx-auto unbooked seat">C2</div>
<div class="col col-lg-1 place mx-auto taken occupied seat">C3</div>
<div class="col col-lg-1 place mx-auto taken occupied seat">C4</div>
<div class="col col-lg-1 place mx-auto unbooked seat">C5</div>
</div>
</div>
<p class="text">You have selected <span id="count">0</span> seats
</p>
<div class="container order d-grid gap-2 mx-auto">
<input class="btn btn-secondary mx-auto" type="button" value="Confirm Booking" id="submit">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="Q7.js"></script>
</body>
</html>【问题讨论】：
-
座椅不变灰是您想要的唯一解决方案吗？
标签： javascript html jquery css