我有多个具有相同类名的div。我想对所有在playbutton click中使用相同类名的div应用css'z-index：99'。使用jquery.Working仅用于第一个Play Button.I想要触发所有播放按钮单击
jQuery(document).ready(function($) {
$("#playButton").click(function() {
$(".close_icon").css('display', 'block');
$(".video-container").css('z-index', '99');
$(".videoThumbnail").css('z-index', '99');
});
$('iframe').load(function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;} </style>"));
});
$(".close_icon").click(function() {
$(".video-container").css('z-index', '0');
$(".close_icon").css('display', 'none');
$("#header").show();
});
});
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}#video-container {
width: 100%;
}
.contentContainer {
background: #5852a3;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #5852a3, #973695);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #5852a3, #973695);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
position: relative;
z-index: 2;
opacity: 0.9;
margin: 0 auto;
min-height: 100vh;
overflow-x: hidden;
min-width: 100%;
text-align: center;
padding: 4% 0% 0% 0%;
}
.video-container {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="video-container" id="video-container">
<h1> background 1</h1>
</div>
<div class="contentContainer">
<div class="playVideo"><a href="javascript:void callPlayer("player","playVideo")" id="playButton">Play button</a>
</div>
</div>
</div>
<div class="content">
<div class="video-container" id="video-container">
<h1>background 2</h1>
</div>
<div class="contentContainer">
<div class="playVideo"><a href="javascript:void callPlayer("player","playVideo")" id="playButton">Play button</a>
</div>
</div>
</div>
答案 0 :(得分：3)
您不能对多个元素#video-container和#playButton使用相同的ID，请尝试使用类。
$(".playButton").click(function() {
$(".close_icon").css('display', 'block');
$(".video-container").css('z-index', '99');
$(".videoThumbnail").css('z-index', '99');
});
答案 1 :(得分：2)
而不是将id="playButton"提供给播放按钮。将其更改为class="playButton"。由于选择Id jquery只选择一个元素
jQuery(document).ready(function($) {
$(".playButton").click(function() {
$(".close_icon").css('display', 'block');
$(".video-container").css('z-index', '99');
$(".videoThumbnail").css('z-index', '99');
});
$('iframe').load(function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;} </style>"));
});
$(".close_icon").click(function() {
$(".video-container").css('z-index', '0');
$(".close_icon").css('display', 'none');
$("#header").show();
});
});
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}#video-container {
width: 100%;
}
.contentContainer {
background: #5852a3;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #5852a3, #973695);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #5852a3, #973695);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
position: relative;
z-index: 2;
opacity: 0.9;
margin: 0 auto;
min-height: 100vh;
overflow-x: hidden;
min-width: 100%;
text-align: center;
padding: 4% 0% 0% 0%;
}
.video-container {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="video-container" id="video-container">
<h1> background 1</h1>
</div>
<div class="contentContainer">
<div class="playVideo"><a href="javascript:void callPlayer("player","playVideo")" class="playButton">Play button</a>
</div>
</div>
</div>
<div class="content">
<div class="video-container" id="video-container">
<h1>background 2</h1>
</div>
<div class="contentContainer">
<div class="playVideo"><a href="javascript:void callPlayer("player","playVideo")" class="playButton">Play button</a>
</div>
</div>
</div>
答案 2 :(得分：2)
您已使用相同的id定义了多个元素。 Id必须是唯一的。此外，您应该找到closest div，其中包含content和find个元素，以便css应用jQuery(document).ready(function($) {
$(".playButton").click(function() {
$(this).closest("div.content").find(".close_icon").css('display', 'block');
$(this).closest("div.content").find(".video-container").css('z-index', '99');
$(this).closest("div.content").find(".videoThumbnail").css('z-index', '99');
});
$('iframe').load(function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;} </style>"));
});
$(".close_icon").click(function() {
$(this).closest("div.content").find(".video-container").css('z-index', '0');
$(this).closest("div.content").find(".close_icon").css('display', 'none');
$("#header").show();
});
});
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}而不是全部。
#video-container {
width: 100%;
}
.contentContainer {
background: #5852a3;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #5852a3, #973695);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #5852a3, #973695);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
position: relative;
z-index: 2;
opacity: 0.9;
margin: 0 auto;
min-height: 100vh;
overflow-x: hidden;
min-width: 100%;
text-align: center;
padding: 4% 0% 0% 0%;
}
.video-container {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="video-container">
<h1> background 1</h1>
</div>
<div class="contentContainer">
<div class="playVideo"><a href="javascript:void callPlayer("player","playVideo")" class="playButton">Play button</a>
</div>
</div>
</div>
<div class="content">
<div class="video-container">
<h1>background 2</h1>
</div>
<div class="contentContainer">
<div class="playVideo"><a href="javascript:void callPlayer("player","playVideo")" class="playButton">Play button</a>
</div>
</div>
</div>Textview tv1 = findviewbyid(r.id.textview1);
tv1.setText(Float.toString(dronespeed));