为了后面div【i】.style.z-index=1;出错
ba21 发表于 2022-3-30 22:30this 就是 当前点击li
我是不知道你想干嘛,功能实现了,你还纠结不能用的东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>top栏切换</title>
<style>
#main{
position:relative;
width:600px;
height:500px;
background-color:gray;
margin:0 auto;
}
ul{
display:flex;
height:50px;
background-color:green;
}
ul li{
list-style:none;
margin-left:40px;
background-color:red;
text-align:center;
line-height:40px;
cursor:pointer;
}
ul li:hover{
background-color:yellow;
color:gray;
}
.one{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:brown;
}
.two{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:#FFC0CB;
}
.three{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:deeppink;
}
.four{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:#808080;
}
p{
width:300px;
height:300px;
margin-top:100px;
margin-left:200px;
text-align:center;
line-height:300px;
background-color:gray;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li>商品生源地</li>
<li>商品价格</li>
<li>商品类型</li>
<li>商品功能</li>
</ul>
<div class="one"><p>来自法国</p></div>
<div class="two"><p>1999元</p></div>
<div class="three"><p>手机类</p></div>
<div class="four"><p>打电话</p></div>
</div>
<script>
var div=document.getElementById('main').getElementsByTagName('div');
var li=document.getElementsByTagName('ul').getElementsByTagName('li');
for( var i=0;i<div.length;i++){
li.onclick=function(){
div.style.z-index=1;//为何这里出错;
}
}
</script>
</body>
</html>
只有position为relative/absolute/fixed的元素,z-index属性才起作用。注意,是该元素本身。 前面的贴请结贴。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>top栏切换</title>
<style>
#main{
position:relative;
width:600px;
height:500px;
background-color:gray;
margin:0 auto;
}
ul{
display:flex;
height:50px;
background-color:green;
}
ul li{
list-style:none;
margin-left:40px;
background-color:red;
text-align:center;
line-height:40px;
cursor:pointer;
}
ul li:hover{
background-color:yellow;
color:gray;
}
.one{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:brown;
}
.two{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:#FFC0CB;
}
.three{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:deeppink;
}
.four{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:#808080;
}
p{
width:300px;
height:300px;
margin-top:100px;
margin-left:200px;
text-align:center;
line-height:300px;
background-color:gray;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li>商品生源地</li>
<li>商品价格</li>
<li>商品类型</li>
<li>商品功能</li>
</ul>
<div class="one"><p>来自法国</p></div>
<div class="two"><p>1999元</p></div>
<div class="three"><p>手机类</p></div>
<div class="four"><p>打电话</p></div>
</div>
<script>
var div=document.getElementById('main').getElementsByTagName('div');
var li=document.getElementsByTagName('li');
for( var i=0;i<li.length;i++)
{
li.onclick=function()
{
for( var i=0;i<div.length;i++)
{ div.style.zIndex=-1;
}
if(this.innerText=='商品价格')
{
div.style.zIndex=1;
}
}
}
</script>
</body>
</html>
wp231957 发表于 2022-3-30 23:44
只有position为relative/absolute/fixed的元素,z-index属性才起作用。注意,是该元素本身。
我设置了的。 如问题代码:
<script>
var div=document.getElementById('main').getElementsByTagName('div');
var li=document.getElementsByTagName('li');
for(var k=0; k<li.length; k++){
li.onclick=function(){
console.log(k);
}
}
</script>
再次回复你之前说的function中调用 i 出错的问题。更正这里的 i 变量 问题不是作用域问题 ,而是 代码形成了闭包,闭包中局部变量是引用而非值
解析问题代码:
1. 首先闭包中局部变量是引用,也就是说 console.log(k); 中的 k 是个地址,而不是值。
2. script代码在页面加载便执行。
3. 经过一轮 for(var k=0; k<li.length; k++) 后 k 最后的值是 k==li.length,k超出了数组下标。
4. 当进行点击li测试时,所有的onclick函数中的k其实是个地址,值k==li.lenght。在你原代码中 i,i超出数组下标,报错。
3种解决办法:
1. 标记法
<script>
var div=document.getElementById('main').getElementsByTagName('div');
var li=document.getElementsByTagName('li');
for(var k=0; k<li.length; k++){
li.flag = k; // 添加flag用于存储 k 的值
li.onclick=function(){
console.log(this.flag);
}
}
</script>
2.
<script>
var div=document.getElementById('main').getElementsByTagName('div');
var li=document.getElementsByTagName('li');
for(var k=0; k<li.length; k++){
li.onclick=(function(j){
return function(){
console.log(j);
}
})(k);
}
</script>
3.
<script>
var div=document.getElementById('main').getElementsByTagName('div');
var li=document.getElementsByTagName('li');
for(var k=0; k<li.length; k++){
(function(j){
li.onclick= function(){
console.log(j);
}
})(k);
}
</script>
测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>top栏切换</title>
<style>
#main{
position:relative;
width:600px;
height:500px;
background-color:gray;
margin:0 auto;
}
ul{
display:flex;
height:50px;
background-color:green;
}
ul li{
list-style:none;
margin-left:40px;
background-color:red;
text-align:center;
line-height:40px;
cursor:pointer;
}
ul li:hover{
background-color:yellow;
color:gray;
}
.one{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:brown;
}
.two{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:#FFC0CB;
}
.three{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:deeppink;
}
.four{
position:absolute;
top:50px;
left:0;
width:600px;
height:500px;
background-color:#808080;
}
p{
width:300px;
height:300px;
margin-top:100px;
margin-left:200px;
text-align:center;
line-height:300px;
background-color:gray;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li>商品生源地</li>
<li>商品价格</li>
<li>商品类型</li>
<li>商品功能</li>
</ul>
<div class="one"><p>来自法国</p></div>
<div class="two"><p>1999元</p></div>
<div class="three"><p>手机类</p></div>
<div class="four"><p>打电话</p></div>
</div>
<script>
var div=document.getElementById('main').getElementsByTagName('div');
var li=document.getElementsByTagName('li');
for(var k=0; k<li.length; k++){
// 问题代码(最终k的值==li.length)
li.onclick=function(){
console.log(k);
}
// 方法1
//li.flag = k;
//li.onclick=function(){
// console.log(this.flag);
//}
// 方法2
//li.onclick=(function(j){
// return function(){
// console.log(j);
// }
//})(k);
// 方法3
//(function(j){
// li.onclick= function(){
// console.log(j);
// }
//})(k);
}
</script>
</body>
</html>
页:
[1]