如何解决后面this改为li【i】不受作用域的影响顺利更改
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>循环图片小原点点击</title>
<style>
*{
padding:0;
margin:0;
}
ul{
display:flex;
}
li{
width:100px;
height:100px;
background-color:gray;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li.onclick=function(){
for(var i=0;i<li.length;i++)
{
li.style.backgroundColor='';
}
this.style.backgroundColor='pink';
}
}
</script>
</body>
</html> var li=document.getElementsByTagName('li');
for(var a=0;a<li.length;a++){
li.onclick=function(){
for(var i=0;i<li.length;i++)
{
li.style.backgroundColor='';
}
li.style.backgroundColor='pink';
}
}
更改了li里的i为a，为啥没用。 var li=document.getElementsByTagName('li');
for(var a=0;a<li.length;a++){
li.onclick=function(){
for(var i=0;i<li.length;i++)
{
li.style.backgroundColor='';
}
li.style.backgroundColor='pink';
}
}
更改了li里的i为a，为何没用，如果最后一个函数里找不到a，不是应该往上找吗，然后确定了是绑定了该事件的li也就是this表示的li 你是想这样吧。
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li.onclick=function(){
for(var i=0;i<li.length;i++)
{
li.style.backgroundColor='transparent';
}
this.style.backgroundColor='pink';
} ba21 发表于 2022-3-30 21:17
你是想这样吧。
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li.onclick=function(){
for(var i=0;i<li.length;i++)
{
li.style.backgroundColor='transparent';
}
this.style.backgroundColor='pink';//this改为li【i】;
} 小黄练编程 发表于 2022-3-30 21:47
this 就是 当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。
<script>
// 1.1. script脚本页面加载便执行，进行相关绑定设置。
var li=document.getElementsByTagName('li');
// 1.2. 页面加载时遍历一遍li标签，进行相关绑定设置。
for(var i=0;i<li.length;i++)
{
// 1.3 给每个li标签绑定事件
li.onclick=function()
{
// 2.1 当某个标签点击时，遍历所有li标签进行设置
for(var j=0;j<li.length; j++)
{
li.style.backgroundColor='transparent';
if(li==this)
{
li.style.backgroundColor='pink'; // 2.3 到这不是一个意思？
}
}
//this.style.backgroundColor='pink'; // 2.2 这肯定是用this，给当前点击的li进行设置
}
// li，也是页面加载时执行，这里不可能是你点击执行
}
</script> ba21 发表于 2022-3-30 22:30
this 就是 当前点击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>
这回还真碰到了这问题了 小黄练编程 发表于 2022-3-30 23:31
这回还真碰到了这问题了
这回后面那个div【i】可不能用this了，我想实现点击li然后触发事件，那个li被点击然后相应下面的div显示出来.
页:
[1]