无法读取未定义的属性“classList”

2024-03-28

我正在尝试做一个简单的滑块,但我遇到了这个问题:

Uncaught TypeError: Cannot read property 'classList' of undefined

这是我的代码:

var div = document.querySelectorAll("div");

for(var i = 0; i < 6; i++){  
    div[i].onclick = function() {
        this.classList.remove("active");
        div[i+1].classList.add("active");
    }
}

有人可以帮我吗?


似乎可能会发生这种情况,因为 i 的范围仅限于外部函数,因此它将始终设置为 i 的最大值。因为这,div[i + 1]将永远是未定义的。你可以做的是:

div[i].onclick = function(idx) {
  this.classList.remove("active");
  if(idx < div.length - 1) div[idx + 1].classList.add("active");
}.bind(div[i], i);

Bind 的作用是获取传递给函数的变量值以及“this”值的快照。 “this”的值首先出现,然后是函数的参数。然后,它返回被调用的函数,并将其参数的某些子集绑定到您提供的值。任何未绑定的参数都可以由调用者提供,但所有绑定参数必须位于调用者提供的参数之前。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法读取未定义的属性“classList” 的相关文章

  • setInterval() 如何影响性能?

    我们正在使用 Twitter Bootstrap 作为框架构建一个 Web 应用程序 但在显示 隐藏工具提示时遇到问题 除了尝试找到实际问题的解决方案之外 我还有一个关于我们同时使用的解决方法的问题 从性能角度来看 使用 setInterv
  • chai-http/superagent : 设置多部分表单字段的 Content-Type

    在集成测试中上传文件如下 chai request server instance post profile photo 0 set Access Token accessToken set API Key testConfig apiKe
  • JavaScript 对输入的循环创建一个对象数组

    我正在尝试循环 div 中的输入元素 以创建对象数组 div div
  • Heroku 上重启后 Better-SQLite3 数据库重置

    我有一个 Discord 机器人better sqlite3 https github com JoshuaWise better sqlite3硬币和 XP 数据库 直到两周前它一直工作得很好 现在 每次重新启动后 它只会恢复 XP 和硬
  • firebase.storage() 不是玩笑测试用例中的函数

    我正在使用 Jest 来测试我的 firebase 功能 这一切都在浏览器中进行 因此我与服务器端的 firebase 没有任何冲突 当我使用firebase auth or firebase database 一切正常 当我尝试使用时fi
  • 动态添加jinja模板

    我有一个 jinja 模板 它是一组 div 标签内的唯一内容 div include temppage html div 当我按下按钮时 我想用其他内容替换标签之间的所有内容 我希望用另一个 jinja 模板 include realpa
  • Firebase 模拟器无法促进/运行新功能

    我有三个云功能 其中两个已部署到我的 firebase 项目中 其中一个是我刚刚添加的 我希望在部署之前在本地测试新的功能 但是当我尝试使用它时却无法使用 并且只有两个已部署的功能可用 Firebase 模拟器在端口上运行良好5001 像往
  • 如何在 Angular2 中为表单分配和验证数组

    我的模型 this profile 在 javascript 中有一个属性叫做emails 这是一个数组 email isDefault status 然后我将其定义如下 this profileForm this formBuilder
  • 如何在正则表达式中区分数字和ip地址?

    例如 如果我们查看 5 56 和 183 55 0 144 基本上 当你做这样的事情时 d d 它匹配 5 56 189 55 和 0 144 有没有办法通过正则表达式仅匹配数字而不匹配 ip 地址的部分 我尝试使用前瞻 但我不知道它应该是
  • Java:从 ScriptEngine javascript 返回一个对象

    我正在尝试使用 Java 来评估 javascript脚本引擎 https docs oracle com javase 7 docs api javax script ScriptEngine html班级 这是我正在尝试做的事情的一个简
  • 输入和文本区域可以拖动吗?

    MDN 规范以及我能通过 Google 找到的每个网站都说所有 HTML 元素都可以拖动 然而 在实践中 我发现我无法拖动文本输入或文本区域 即使它们已被禁用 例如 使用以下代码 img src http www placehold it
  • 字符串化 JavaScript 对象

    我正在寻找字符串化一个对象 我想要这样的输出 1 valeur dalebrun usager experttasp date 2013 08 20 16 41 50 2 valeur test usager experttasp date
  • JQuery 验证不起作用

    我有一种表单 其中一个输入类型的值为 名字 但这可以在 onfocus 函数上更改我想验证此输入字段 如果它为空白或 名字 我有两个 jQuery 文件jquery 1 4 2 min js jquery validate pack js
  • 如何使用 javascript 迭代文件系统目录和文件?

    我正在使用 Javascript 编写一个应用程序 该应用程序将与 Phonegap 一起使用来制作 Android 应用程序 我正在使用 Phonegap File API 来读取目录和文件 相关代码如下所示 document addEv
  • 使用 Lodash 循环 JavaScript 对象中的属性

    是否可以循环访问 JavaScript 对象中的属性 例如 我有一个 JavaScript 对象定义如下 myObject options property1 value 1 property2 value 2 属性将动态添加到该对象 有没
  • 谷歌浏览器不显示一个网站的alert()弹出窗口

    我正在开发一个 javascript 循环 该循环会随着循环的进行而提醒每个键值 为了加快速度 我选中了 阻止此页面创建其他对话框 框 通常这只会抑制一个例程的弹出窗口 但它们还没有回来 在 Google Chrome 中 alert 消息
  • 用于检查字符串是否至少包含 3 个字母数字字符的最有效的正则表达式

    我有这个正则表达式 a zA Z0 9 3 我用它来查看字符串中是否至少包含 3 个字母数字字符 似乎有效 它应该匹配的字符串示例 a3c 0 c 8 9 9d 但是 我需要它更快地工作 有没有更好的方法使用正则表达式来匹配相同的模式 编辑
  • 我应该采取什么圆角方法?

    因此 关于圆角的信息并不缺乏 我已经经历过其中的大部分 我发帖是为了征求社区对这一点的意见 我的场景是 我们正在开发一个圆角相关设计 主要用于交互
  • 如何连接/组合两个数组以连接成一个数组?

    我正在尝试将 JavaScript 中的 2 个数组合并为一个 var lines new Array a b c lines new Array d e f 这是一个简单的例子 我希望能够将它们组合起来 这样当读取第二行时 数组中的第四个
  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr

随机推荐