Javascript 为什么这个关键词不能被其他东西替代?

Javascript 为什么这个关键词不能被其他东西替代?,javascript,html,css,Javascript,Html,Css,这些天我在学习网页设计,但在这段代码中,我试图用acc[I]替换this关键字,但为什么程序不能像以前那样运行 为什么我不能将这个关键字替换为acc[I]?!这不合理吗?为什么? var panel = this.nextElementSibling; this.classList.toggle("active"); 在上面的两行中,我不能这样做 您实际上在那里创建了一个回调函数,单击acc[i]将触发该函数。因此,它无法从函数内部访问acc[i],因为调用函数时您不发送它。您不能用acc[i

这些天我在学习网页设计,但在这段代码中,我试图用
acc[I]
替换
this
关键字,但为什么程序不能像以前那样运行

为什么我不能将
这个
关键字替换为
acc[I]
?!这不合理吗?为什么?

var panel = this.nextElementSibling;
this.classList.toggle("active");
在上面的两行中,我不能这样做

您实际上在那里创建了一个回调函数,单击acc[i]将触发该函数。因此,它无法从函数内部访问acc[i],因为调用函数时您不发送它。

您不能用
acc[i]
替换
this
关键字,因为在循环结束时,变量
i
将被分配给循环接收的最后一个值。因此,每当事件发生在其他元素中时,
acc[i]
将指向最后一个元素,而不是事件发生的实际元素。

如果要将其替换为
acc[i]
,则必须使用
a[i-1]
,因为数组从零开始

下面是完整的js代码

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    acc[i-1].classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
var acc=document.getElementsByClassName(“accordion”);
var i;
对于(i=0;i
工作演示链接


您不能使用acc[i],因为您首先要向每个“acc”元素添加一个单击事件,触发该事件时,您需要准确引用您单击的项目,并且关键字“this”为您提供该引用。如果改为使用acc[i],则i变量现在的值为3,并且acc[3]不存在。

acc[i]在哪里声明?显示所有代码这指的是所有者对象或触发事件的元素在回调函数中是什么意思?因为脚本只运行一个,并向元素添加一个事件侦听器,当您通过单击调用这些回调时,不再定义acc,该元素只有这个引用。您的意思是acc[i]中的“i”在代码中是3,对吗?我的意思是,acc[I]是acc[3],因为acc[I]变量只会被赋予最后一个值I(3),所以对于acc[3],我们无能为力,对吗?