var list1=[];//[l1,l2,l3,l4,l5,l6] var list2=[];//[rs1,rs2,rs3,rs4,rs5,rs6] for(let i=1;i<7;i++){ var items="l"+i; let item2="rs"+i; list1.push(items); list2.push(item2); } // for(let i=0;i<6;i++){ // let get=document.getElementById(list[i]); // let get2=document.getElementById(list2[i]); // get.addEventListener("click",function(event){ // var clickElement=event.target; // var clickElementId=clickElement.id; // for(var j=1;j<7;j++){ // if ("l"+j!==clickElementId){ // let item="l"+j; // let item2="rs"+j; // document.getElementById(item).style.width="100%"; // document.getElementById(item).style.height="10vh"; // document.getElementById(item2).style.zIndex="5"; // } // } // get.style.width="90%"; // get.style.height="8vh"; // // get2.style.zIndex="15"; // // }); // } // for (let i=0;i<6;i++){ let get1=document.getElementById(list1[i]); let get2=document.getElementById(list2[i]); get1.addEventListener('click',function () { for (let j=0;j<list1.length;j++) { list1[j].style.width="100%"; list1[j].style.height="10vh"; } get1.style.width = "90%"; get1.style.height = "8vh"; }); }这段代码没有实现鼠标点击id为l1的li时这个li的宽度和高度变小的效果,如何更改才能实现
时间: 2024-04-18 21:31:53 浏览: 20
在你提供的代码中,有一些错误和逻辑问题。下面是修复后的代码,实现了当点击 `id` 为 `l1` 的 `li` 元素时,该元素的宽度和高度变小的效果:
```javascript
var list1 = []; //[l1,l2,l3,l4,l5,l6]
var list2 = []; //[rs1,rs2,rs3,rs4,rs5,rs6]
for (let i = 1; i < 7; i++) {
var items = "l" + i;
let item2 = "rs" + i;
list1.push(items);
list2.push(item2);
}
for (let i = 0; i < 6; i++) {
let get1 = document.getElementById(list1[i]);
let get2 = document.getElementById(list2[i]);
get1.addEventListener('click', function() {
for (let j = 0; j < list1.length; j++) {
document.getElementById(list1[j]).style.width = "100%";
document.getElementById(list1[j]).style.height = "10vh";
}
get1.style.width = "90%";
get1.style.height = "8vh";
});
}
```
在修复后的代码中,通过给 `get1` 添加点击事件监听器,当点击 `get1` 元素时,会遍历所有的 `list1` 元素,并将它们的宽度和高度设置为默认值。然后,将当前点击的 `get1` 元素的宽度和高度设置为指定的值。
请确保 HTML 中的元素 id 和数组中的对应元素一致,以便正确绑定事件和修改样式。