向jquery中具有相同类的所有div添加css属性

我有多个具有相同类名的div。我想对所有在playbutton click中具有相同类名的div应用css“z-index:99”。使用jquery。仅对第一个Play按钮工作。我想对所有playbutton click进行触发

jQuerydocument.readyfunction${ $playButton.clickfunction{ $.close_icon.css'display'，'block'； $.video container.css'z-index'，'99'； $.video缩略图.css'z-index'，'99'； }; $'iframe'.loadfunction{ $'iframe'.contents.findhead .append$iframe{height:100%；left:50%；min height:100vh；min width:100%；position:absolute；top:60%；transform:translate-50%，-60%；width:100%；}； }; $.close_icon.clickfunction{ $.video container.css'z-index'，0'； $.close_icon.css'display'，'none'； $header.show； }; }; 函数callPlayerframe_id，func，args{ 如果window.jQuery&&frame\u id instanceof jQuery frame\u id=frame\u id.get0.id； var iframe=document.getElementByIdframe\u id； 如果iframe&&iframe.tagName.toUpperCase！=“iframe”{ iframe=iframe.getElementsByTagName'iframe'[0]； } 如果iframe{ //框架存在， iframe.contentWindow.postMessageJSON.stringify{ 事件：命令， func:func， args:args | |[]， id:frame\u id }, *; } } 视频容器{ 宽度：100%； } .contentContainer{ 背景：5852a3； /*对于不支持渐变的浏览器*/ 背景：-webkit线性梯度左，5852a3，973695； /*适用于Safari 5.1至6.0*/ 背景：-o-linear-gradientright，5852a3，973695； /*歌剧11.1至12.0*/ 背景：-moz线性梯度RGB159,74,159,0.5,rgb112,91,168,0.5； 背景：rgba0,0,0,0线性梯度向右，rgba88,82,163,10%，rgba151,54,149,1100%重复滚动0； 位置：相对位置； z指数：2； 不透明度：0.9； 保证金：0自动； 最小高度：100vh； 溢出x：隐藏； 最小宽度：100%； 文本对齐：居中； 填充：4%0%0%0%； } .视频容器{ 位置：绝对位置； z指数：1； 宽度：100%； 身高：100%； 溢出：隐藏； } 背景1 背景2 而不是将id=playButton指定给playButton。将其更改为class=playButton。由于选择Id，jquery只选择一个元素

jQuerydocument.readyfunction${ $.playButton.clickfunction{ $.close_icon.css'display'，'block'； $.video container.css'z-index'，'99'； $.video缩略图.css'z-index'，'99'； }; $'iframe'.loadfunction{ $'iframe'.contents.findhead .append$iframe{height:100%；left:50%；min height:100vh；min width:100%；position:absolute；top:60%；transform:translate-50%，-60%；width:100%；}； }; $.close_icon.clickfunction{ $.video container.css'z-index'，0'； $.close_icon.css'display'，'none'； $header.show； }; }; 函数callPlayerframe_id，func，args{ 如果window.jQuery&&frame\u id instanceof jQuery frame\u id=frame\u id.get0.id； var iframe=document.getElementByIdframe\u id； 如果iframe&&iframe.tagName.toUpperCase！=“iframe”{ iframe=iframe.getElementsByTagName'iframe'[0]； } 如果iframe{ //框架存在， iframe.contentWindow.postMessageJSON.stringify{ 事件：命令， func:func， args:args | |[]， id:frame\u id }, *; } } 视频容器{ 宽度：100%； } .contentContainer{ 背景：5852a3； /*对于不支持渐变的浏览器*/ 背景：-webkit线性梯度左，5852a3，973695； /*适用于Safari 5.1至6.0*/ 背景：-o-linear-gradientright，5852a3，973695； /*歌剧11.1至12.0*/ 背景：-moz线性梯度RGB159,74,159,0.5,rgb112,91,168,0.5； 背景：rgba0,0,0,0线性梯度向右，rgba88,82,163,10%，rgba151,54,149,1100%重复滚动0； 位置：相对位置； z指数：2； 不透明度：0.9； 保证金：0自动； 最小高度：100vh； 溢出x：隐藏； 最小宽度：100%； 文本对齐：居中； 填充：4%0%0%0%； } .视频容器{ 位置：绝对位置； z指数：1； 宽度：100%； 身高：100%； 溢出：隐藏； } 背景1 背景2

---

不能对多元素视频容器和playButton使用相同的ID，请尝试使用类

$(".playButton").click(function() {
   $(".close_icon").css('display', 'block');
   $(".video-container").css('z-index', '99');
   $(".videoThumbnail").css('z-index', '99');
});

---

您定义了多个具有相同id的元素。id必须唯一。此外，您还应该找到与类内容最接近的div，并在其中找到要将css应用于而不是应用于所有内容的元素

jQuerydocument.readyfunction${ $.playButton.clickfunction{ $this.closestdiv.content.find.close_icon.css'display'，'block'； $this.closestdiv.content.find.video container.css'z-index'，'99'； $this.closestdiv.content.find.video缩略图.css'z-index'，'99'； }; $'iframe'.loadfunction{ $'iframe'.contents.findhead .append$iframe{height:100%；left:50%；min height:100vh；min width:100%；position:absolute；top:60%；transform:translate-50%，-60%；width:100%；}； }; $.close_icon.clickfunction{ $this.closestdiv.content.find.video container.css'z-index'，0'； $this.closestdiv.content.find.close_icon.css'display'，'none'； $header.show； }; }; 函数callPlayerframe_id，func，args{ 如果window.jQuery&&frame\u id instanceof jQuery frame\u id=frame\u id.get0.id； var iframe=document.getElementByIdframe\u id； 如果iframe&&iframe.tagName.toUpperCase！=“iframe”{ iframe=iframe.getElementsByTagName'iframe'[0]； } 如果iframe{ //框架存在， iframe.contentWindow.postMessageJSON.stringify{ 事件：命令， func:func， args:args | |[]， id:frame\u id }, *; } } 视频容器{ 宽度：100%； } .contentContainer{ 背景：5852a3； /*对于不支持渐变的浏览器*/ 背景：-webkit线性梯度左，5852a3，973695； /*适用于Safari 5.1至6.0*/ 背景：-o-linear-gradientright，5852a3，973695； /*歌剧11.1至12.0*/ 背景：-moz线性梯度RGB159,74,159,0.5,rgb112,91,168,0.5； 背景：rgba0,0,0,0线性梯度向右，rgba88,82,163,10%，rgba151,54,149,1100%重复滚动0； 位置：相对位置； z指数：2； 不透明度：0.9； 保证金：0自动； 最小高度：100vh； 溢出x：隐藏； 最小宽度：100%； 文本对齐：居中； 填充：4%0%0%0%； } .视频容器{ 位置：绝对位置； z指数：1； 宽度：100%； 身高：100%； 溢出：隐藏； } 背景1 背景2

---

这是因为按钮现在隐藏在背景的后面，因为它的z索引。尝试将按钮的z索引设置为大于bg.@Ron.Basco的zindex，可能是这样，但OP只描述一个播放按钮函数的问题是，他对两个按钮使用相同的ID，并尝试使用ID作为jQuery选择器。在这种情况下，您必须使用类名而不是ID。这个答案仍然将css应用于DOM中的所有div，而不是单击按钮的div。