我正在尝试创建并显示一个新的 div 标记，以响应调用 setInterval 的函数调用。 div 标签确实出现了 - 当我检查 chrome 开发人员工具时它存在，但它没有出现在其他元素之上。
我已将新生成的 div 的 z-index 设置为 2000，没有其他 z-index 更大。代码运行后，我可以使用 Chrome 开发工具看到新创建的 div 标签，但它们位于其他 div 的后面。它们应该出现在其他一切之前。
CSS
#main_wrapper{
position: relative;
width:850px;
border:solid 4px #ccc;
overflow: visible;
display: table;
}
#my_img{
position: relative;
width:650px;
display: inline-block;
vertical-align: top;
}
#hgh_lghtr{
position: absolute;
top:5px;
left:1px;
z-index:1000;
border:solid 4px green;
width: 20px;
height: 20px;
}
#cntnt_bx{
position: relative;
top:0px;
z-index:22;
border:solid 4px red;
width: 150px;
height: 100%;
display: inline-block;
margin-left: 14px;
padding: 0px;
}
#mini_nav_hd{
position:relative;
top:0px;
z-index:33;
width:92%;
margin:0 auto;
min-height:20px;
border: solid 2px green;
}
#tmp_bx{
position: absolute;
top:50px;
left:50px;
z-index:2000;
border:solid 4px green;
min-width: 100px;
min-height: 100px;
}
JavaScript
<script>
var slides = [
{ "name":"slide1",
"x":5,
"y":1,
"width": 20,
"height": 20,
"color":"#D80000",
"title":"Navigation Toggle",
"desc":"Shows hides the nagivation menu."
}
];
//***********************************************************
//Changes location of pre-existing div and attempts to create
//new div and append it
//***********************************************************
function changHlghtrPos(){
var slide = slides[slideCntr];
document.getElementById("hgh_lghtr").style.borderColor = "red";
document.getElementById("hgh_lghtr").style.top = slide.y + "px";
document.getElementById("hgh_lghtr").style.left = slide.x + "px";
document.getElementById("hgh_lghtr").style.width = slide.width + "px";
document.getElementById("hgh_lghtr").style.height = slide.height + "px";
var tmp_bx = document.createElement("div");
tmp_bx.id = "tmp_bx";
document.getElementById("main_wrapper").appendChild(tmp_bx);
}
slideCntr = 0;
//******************************************
//Determines if it is ok to move the pre-existing div
//to the next location or clearInterval
//******************************************
function nextSpot(){
if(slideCntr < 5){
slideCntr += 1;
changHlghtrPos();
}else{
clearInterval(nTime);
}
}
jQuery(document).ready(function() {
$("#main_wrapper").empty();
var main_hldr = document.getElementById("main_wrapper");
var my_img = document.createElement("img");
my_img.id = "my_img";
my_img.src = "https://some_image.png";
my_img.alt = "MyProject";
var cntnt_bx = document.createElement("div");
cntnt_bx.id = "cntnt_bx";
var hgh_lghtr = document.createElement("div");
hgh_lghtr.id = "hgh_lghtr";
main_hldr.appendChild(my_img);
main_hldr.appendChild(hgh_lghtr);
main_hldr.appendChild(cntnt_bx);
var mini_nav_hd = document.createElement("div");
mini_nav_hd.id = "mini_nav_hd";
mini_nav_hd.textContent = "Navigation";
var cntntBx = document.getElementById("cntnt_bx");
cntntBx.appendChild(mini_nav_hd);
nTime = setInterval(nextSpot,2000);
});
</script>
示例 HTML
<html>
<head></head>
<body>
<div id="main_wrapper">
<!--three elements are generated when page loads-->
<!--one element is generated in response to setInterval-->
</div>
</body>
</html>
最佳答案
是this你要？如果有效，
function nextSpot(){
if(slideCntr < 5){
slideCntr += 1;
changHlghtrPos();
}else{
clearInterval(nTime);
}
}
也许你需要将 slideCntr += 1; 的位置换成 changHlghtrPos(); 的位置，因为数组的索引从 0 开始。
关于JavaScript 生成的 div 标 checkout 现在其他元素后面 - 设置了 z-index，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31095194/