在这里，我有一个if statement，如果我单击一个座位，应该cosole.log e.target，但是在我的代码中，它没有这样做，并且VS代码没有给我任何错误。为什么呢？
这里是实际代码：
<html>
<head>
<title>Tommy's movie seat booking app</title>
<style>
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
body {
background-color: black;
outline: 0;
display: flex;
flex-direction: column;
color: white;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#movie-container {
margin: 20px 0;
}
#movie-container select {
background-color: white;
border: 0;
outline: none;
border-radius: 10px;
cursor: pointer;
font-size: 15px;
margin-left: 10px;
padding: 5px 15px;
}
.seat {
background-color: grey;
width: 15px;
height: 12px;
margin: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.seat.selected {
background-color: #00e1ff;
}
.seat.occupied {
background-color: white;
}
.seat:nth-of-type(2) {
margin-right: 20px;
}
.seat:nth-last-of-type(2) {
margin-left: 20px;
}
#not1:hover {
cursor: default;
transform: scale(1);
}
#not2:hover {
cursor: default;
transform: scale(1);
}
.seat:not(.occupied):hover {
cursor: pointer;
transform: scale(1.3);
}
#not2 {
margin-right: 1%;
}
.show-case {
background-color: rgba(17, 0, 255, 0.1);
padding: 5px 10px;
border-radius: 10px;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.show-case li {
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.show-case li small {
margin-left: 5px;
}
.screen {
background-color: white;
height: 70px;
width: 100%;
margin: 15px 0;
transform: rotateX(-45deg);
box-shadow: 0 3px 10px rgba(255, 225, 225, 0.7);
}
.row {
display: flex;
}
#container {
margin-left: 2%;
perspective: 700px;
margin-bottom: 30px;
}
#count, #price {
color: rgb(255, 230, 0)
}
</style>
</head>
<body>
<div id="movie-container">
<label>Pick a movie</label>
<select id="movie-name">
<option value="10">Gone with the Wind ($10)</option>
<option value="12">The Sound of Music ($12)</option>
<option value="14">E.T. the Extra-Terrestrial ($14)</option>
<option value="17">Titanic ($17)</option>
<option value="20">The Ten Commandments ($20)</option>
<option value="21">Jaws ($21)</option>
<option value="24">Doctor Zhivago ($24)</option>
<option value="28">The Exorcist ($28)</option>
<option value="29">Snow White and the Seven Dwarfs ($29)</option>
<option value="32">Avengers: Endgame ($32)</option>
<option value="44">Star Wars ($44)</option>
</select>
</div>
<div class="show-case">
<ul>
<li>
<div class="seat" id="not1"></div>
<small>Available</small>
<div class="seat selected" id="not2"></div>
<small>Selected</small>
<div class="seat occupied"></div>
<small>Occupied</small>
</li>
</ul>
</div>
<div id="container">
<div class="screen"></div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
</div>
</div>
<p>You have selected <span id="count">0</span> <span id="s">seats</span> for the price of $<span id="total">0</span>.</p>
<script>
const container = document.querySelector("#container");
const seats = document.querySelectorAll(".row.seat");
const count = document.getElementById("count");
const total = document.getElementById("total");
const s = document.getElementById("s");
const selectMovie = document.getElementById("movie-name");
const ticketPrice = +selectMovie.value;
container.addEventListener("click", function (e) {
if (e.target.classList.contains("seat")) {
console.log(e.target);
}
})
</script>
</body>
</html>
我认为问题出在以下代码行：
container.addEventListener("click", function (e) {
if (e.target.classList.contains("seat")) {
console.log(e.target);
}
})
但是我不确定。
有人可以回答我的问题吗？并预先感谢。
答案 0 :(得分：0)
尝试将事件监听器而不是容器添加到座位的：
document.querySelectorAll('.seat').forEach(seat => {
seat.addEventListener('click', e => {
console.log(e.target)
})
})
编辑：忘记循环querySelectorAll的结果，因为它返回了NodeList
答案 1 :(得分：0)
似乎您遇到了错误：
document.getElementByClass不是函数
可能是document.getElementByClassName的错字
或者您可以使用Document.querySelector通过CSS选择器定位元素
所以代替：
const seats = document.getElementByClass(".row.seat");
您应该这样做：
const seats = document.querySelector(".row.seat");
答案 2 :(得分：0)
哦！我只是想通了！我的代码有错误。
在我的代码中，我键入了getElementByClass，而getElementByClass不是内置函数。正确的代码应为getElementByClassName。代码中应该有一个名称。