在包含嵌入式 iframe YouTube 视频的视频库(使用 Isotope 制作)中，每个视频都有一个我创建的相同自定义播放图标(感谢来自 Rob W 的 this post)。 当我单击自定义图标时，它会消失(基本上我是通过 CSS 和 JQuery“单击”功能使其透明)。
问题是当我点击其中一个图标时，所有其他图标也都消失了，因为在这些 iframe 元素前面可见的播放图标都共享同一个 CSS 类。
我可以做些什么来使每个自定义播放图标独立，绑定(bind)到它自己的 Youtube 嵌入式 iframe 元素？
这是一些代码:
我的 JQuery:
$(document).ready(function(){
$('.playbutton').click(function(){
$('.playbutton').css({
'background': '#fff0',
'transition': 'all 1s ease'
});
$('.playbutton-triangle').css({
'border-color': 'transparent #80808000',
'transition': 'all 1s ease'
});
});
});
还有一些 HTML 显示我的视频是如何显示的:
<div class="item-nf cate1" id="video1">
<a href="javascript:void callPlayer("video1","playVideo")" class="playbutton">
<div class="playbutton-triangle"></div>
</a>
<iframe width="400" height="225" src="https://www.youtube.com/embed/A_YOUTUBE_VIDEO_ID?showinfo=0&rel=0&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="item-nf cate2" id="video2">
etc...
和here is a CodePen showing it concretely .
我想使用“nth-child()”CSS 元素，但考虑到我的实际代码，我不知道是否可以使用它。或许还有更简单的方法，比如直接用JQuery让图标消失而不用修改CSS，但我觉得应该是一样的。
非常感谢阅读!
最佳答案
您正在寻找 $(this) .在 jQuery 事件处理程序内部(比如你的 click )， this将引用触发事件的特定元素。 †
您可以使用 $(this).find('.playbutton-triangle') 指定您不想要所有 .playbutton-triangle元素，但仅限于 $(this) 的后代元素(点击的元素)。
$('.playbutton').click(function() {
$(this).css({
'background': '#fff0',
'transition': 'all 1s ease'
});
$(this).find('.playbutton-triangle').css({
'border-color': 'transparent #80808000',
'transition': 'all 1s ease'
});
});
也就是说，作为学习工具，上面的示例略显冗长。您最好将任何重复引用的元素存储为变量，如下所示:
var $this = $(this);
$this.css({
//etc
});
$this.find( ... ).css({
//etc
});
† 更准确地说，它是指事件附加到的元素。例如，如果您附加了 click整个事件 <body>元素，然后单击其中的任何内容，该事件就会触发。但是$(this)不会引用您单击的元素，它会引用 body ，因为那是 事件附加到的元素。
关于jquery - 在多个 HTML 元素上使用相同的 CSS 类，用 JQuery 触发但不是单独触发(涉及自定义 YouTube 播放按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51549945/