当具有多个div时，Jquery单击事件以添加/删除特定类

Question

我正在尝试添加在单击并开始播放视频后删除播放按钮的功能。我的问题是，我的页面上有多个视频，一旦点击播放按钮，视频明星播放，所有其他按钮也会被删除。

代码：

//JS - To remove image overlay and video starts playing (working)
$(function() {
document.getElementById("playbutton").disabled = true;
var player = $('iframe');
var playerOrigin = '*';
// Listen for messages from the player
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
} else {
window.attachEvent('onmessage', onMessageReceived, false);
}
function onMessageReceived(event) {
var data = JSON.parse(event.data);
console.log(data.event);
if (data.event === "ready") {
//attach ready function to the image
document.getElementById("playbutton").disabled = false;
$('#playbutton').click(function() {
player[0].contentWindow.postMessage({
"method": "play"
}, playerOrigin);
$(this).remove();
});
}
}
});
$('.overlay').click(function() {
$('.video-icon').fadeToggle(300)
})

<div id="showreel">
<div id="container">
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/..."</iframe>
<img class="overlay" src="../images/overlay.png" style ="position:absolute; top:0; left:0;width: 100%;height:100%" id="playbutton">
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
</img>
<img class="video-icon" src="../../images/general/play-button.png">
</div>
</div>

谢谢！

Answer 1

最佳实践是为元素唯一使用ID。如果有多个元素具有相同的ID，就会开始遇到这样的问题(并非双关语(。

尝试将所有播放按钮的id="playbutton"更改为class="playbutton"，然后将$('#playbutton').click(function() {更改为$('.playbutton').click(function() {。