请老师检查
来源：3-13 编程练习
慕数据5191420
2022-04-12 20:07:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul style="font-size: 20px;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jquery</li>
<li>HTML5</li>
<li>CSS3</li>
<li>ES6</li>
</ul>
<script type="text/javascript">
//补充代码
// var写法
// var list = document.querySelector('ul');
// var lis = document.getElementsByTagName('li');
// for (var i = 0; i < lis.length; i++) {
// (function (index) {
// var a = lis[index].innerText;
// function change() {
// lis[index].innerText += '我是' + index + '个';
// lis[index].style.color = 'red';
// lis[index].style.fontSize = '30px';
// }
// function back() {
// lis[index].innerText = a;
// lis[index].style.color = 'black';
// lis[index].style.fontSize = '20px';
// }
// lis[index].addEventListener('mouseover',change,false);
// lis[index].addEventListener('mouseout',back,false);
// })(i)
// }
// let写法
let list = document.querySelector('ul');
let lis = document.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
let a = lis[i].innerText;
function change() {
lis[i].innerText += '我是' + i + '个';
lis[i].style.color = 'red';
lis[i].style.fontSize = '30px';
}
function back() {
lis[i].innerText = a;
lis[i].style.color = 'black';
lis[i].style.fontSize = '20px';
}
lis[i].addEventListener('mouseover', change, false);
lis[i].addEventListener('mouseout', back, false);
}
</script>
</body>
</html>写回答
1回答
-
好帮手慕慕子
2022-04-13
同学你好，思路是对的，不过其中有个细节需要注意下，索引是从0开始计算的，建议优化：针对索引进行加一操作
祝学习愉快~
0
