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"; }); }这段代码问题在哪里

这段代码的问题在于 `if` 语句的条件判断部分不正确，导致了错误的元素被选中和修改。

在 `if` 语句的条件中，您使用了字符串拼接的方式来生成要比较的元素ID。然而，使用 `!==` 运算符进行比较时，并不会将字符串拼接后的结果与 `clickElementId` 进行比较，而是直接将字符串与数字 `j` 进行比较。这会导致所有的元素都满足条件，从而使得所有元素的宽度、高度和 `zIndex` 都被修改。

为了解决这个问题，您可以将条件判断部分改为使用 `!=` 或 `!==` 运算符比较字符串类型的 `clickElementId` 与 `item`。修改后的代码如下：

for (let 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";
  }
}

使用这样的条件判断，只有与当前点击元素ID不相等的元素才会被选中并进行修改。

希望这样解决了您的问题！如果还有其他问题，请随时提问。

相关问题

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的宽度和高度变小的效果，如何更改才能实现

在你提供的代码中，有一些错误和逻辑问题。下面是修复后的代码，实现了当点击 `id` 为 `l1` 的 `li` 元素时，该元素的宽度和高度变小的效果：

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 和数组中的对应元素一致，以便正确绑定事件和修改样式。

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"; let rsShow="rs"+(j+1); document.getElementById(rsShow).style.zIndex="5"; } get1.style.width = "90%"; get1.style.height = "8vh"; let rsShow="rs"+(i+1); document.getElementById(rsShow).style.zIndex="15"; }); }此时添加了当左部li点击时，右边对应的被隐藏的div的z-index调至15从而使其显现，但是添加了和这个功能相关的代码后出现了问题，例如左边点击li时li不会缩小

在你提供的代码中，问题可能是由于点击事件的冒泡导致的。当你在点击 `get1` 元素时，点击事件会冒泡到 `document.getElementById(list1[j])` 这些元素上，导致它们的样式也被修改。为了解决这个问题，你可以在事件监听器中使用 `event.stopPropagation()` 来停止事件冒泡。

以下是修复后的代码示例：

for (let i = 0; i < 6; i++) {
    let get1 = document.getElementById(list1[i]);
    let get2 = document.getElementById(list2[i]);

    get1.addEventListener('click', function(event) {
        event.stopPropagation();

        for (let j = 0; j < list1.length; j++) {
            document.getElementById(list1[j]).style.width = "100%";
            document.getElementById(list1[j]).style.height = "10vh";
            let rsShow = "rs" + (j + 1);
            document.getElementById(rsShow).style.zIndex = "5";
        }
        
        get1.style.width = "90%";
        get1.style.height = "8vh";
        let rsShow = "rs" + (i + 1);
        document.getElementById(rsShow).style.zIndex = "15";
    });
}

在修复后的代码中，我们在事件监听器中添加了 `event.stopPropagation()` 来停止事件冒泡。这样，在点击 `get1` 元素时，点击事件不会继续冒泡到其他元素上。这样就可以确保只有点击的元素会被修改样式，其他元素不受影响。

请尝试使用修复后的代码，并确保 HTML 中的元素 id 和数组中的对应元素一致，以便正确绑定事件和修改样式。