尝试在我的JavaScript代码中理解“ this”(一件事有效,另一件事无效)

新旺5

我一直在尝试通过将一本书中的一些Jquery实例重构为javascript来学习javascript。在下面的代码中,我将单击侦听器添加到选项卡,并在用户单击选项卡时将其更改为活动状态。

var tabs = document.querySelectorAll(".tabs a span");
var content = document.querySelectorAll("main .content li");

for (var tabNumber = 0; tabNumber <= 2; tabNumber++) {
  tabs[tabNumber].addEventListener("click", function (event) {
    
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].classList.remove("active");
    }
    tabs[tabNumber].classList.add("active");
    for (var i = 0; i < content.length; i++) {
      content[i].innerHTML = "";
    }
    event.preventDefault();
  });
}

undefined error当我运行它时,将返回一个但是,我尝试用替换tabs[tabNumber].classList.add("active")this.classList.add("active")并且它起作用了。

为什么先前的代码不起作用?据我所知,他们指的是同一件事,并且tabs[tabNumber]应该起作用,因为此时代码就是tabs[0]

科哈斯

我猜还有其他答案告诉您为什么tabs[tabNumber]不起作用(因为它来自for循环的得分,因此始终等于tabNumber的较大值)。

这就是为什么我建议使用.forEach循环的原因。尽管要小心,因为它不适用于产生的DOM节点数组document.querySelectorAll(),但是您可以使用:

// ES6
Array.from(document.querySelectorAll('...'))
// ES5
[].slice.call(document.querySelectorAll('...'))

无论如何,我为您的代码做了一个简化的工作演示请注意,我将当前活动的选项卡保存在变量中,以防止再次for循环。您也可以这样做:

document.querySelector('.active').classList.remove('active')

但是我喜欢减少DOM的读取量。

祝您学徒好运,将一些jQuery代码重写为Vanilla JS似乎是一个好方法,并且您可能会获得对JavaScript更好的理解。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

为什么javascript返回另一件事,而php又返回另一件事?

来自分类Dev

在正则表达式中,捕获一件事,或另一件事,或两者兼而有之

来自分类Dev

包括目录中的所有内容,但只有一件事

来自分类Dev

用来检查URL内容并仅保留一件事的Javascript代码

来自分类Dev

我如何只能从文本文件中读取一件事?

来自分类Dev

Javascript:如何判断跨度是否是段落中的第一件事?

来自分类Dev

球拍,踏步机,我不懂一件事

来自分类Dev

内容的水平和垂直居中(我不明白一件事)

来自分类Dev

首先在HashMap中获得第一件事?

来自分类Dev

在AssertJ中测试一件事是否成立

来自分类Dev

如何选择数组中的最后一件事?

来自分类Dev

首先在HashMap中获得第一件事?

来自分类Dev

android中的任务堆栈和后堆栈是同一件事吗

来自分类Dev

不同目录中的相同名称是同一件事吗?

来自分类Dev

如何根据值在不同列中显示一件事的结果

来自分类Dev

从一行中获取一件事,然后将其与另一行中的一件事连接起来

来自分类Dev

这两段代码代表同一件事吗?有性能差异吗?

来自分类Dev

代码必须先做一件事,然后等待几秒钟,然后继续

来自分类Dev

向阿格达证明我们在谈论同一件事

来自分类Dev

我可以在 TypeScript 函数签名中将两个“任何”标记为同一件事吗?

来自分类Dev

使用jQuery检查某个元素是否是另一个元素中的第一件事

来自分类Dev

我想将我的变量放在 google Piechart 中,但它一直从选择中选择最后一件事

来自分类Dev

如果在数组中找到元素,则尝试打印一件事;如果不在C中,则尝试打印其他内容

来自分类Dev

我刚刚克隆了一个仓库,它在Github中说的第一件事是“未提交的更改”?与CRLF不相关

来自分类Dev

我刚刚克隆了一个仓库,它在Github中说的第一件事是“未提交的更改”?与CRLF不相关

来自分类Dev

我将如何提高效率(不要一遍又一遍地重复同一件事)?

来自分类Dev

@IBAction仅仅是Swift中的一种语法,还是@Something意味着Swift中的一件事?

来自分类Dev

您如何使javascript变量不止一件事情?

来自分类Dev

这样在CSS中传递参数是一件事情吗?

Related 相关文章

  1. 1

    为什么javascript返回另一件事,而php又返回另一件事?

  2. 2

    在正则表达式中,捕获一件事,或另一件事,或两者兼而有之

  3. 3

    包括目录中的所有内容,但只有一件事

  4. 4

    用来检查URL内容并仅保留一件事的Javascript代码

  5. 5

    我如何只能从文本文件中读取一件事?

  6. 6

    Javascript:如何判断跨度是否是段落中的第一件事?

  7. 7

    球拍,踏步机,我不懂一件事

  8. 8

    内容的水平和垂直居中(我不明白一件事)

  9. 9

    首先在HashMap中获得第一件事?

  10. 10

    在AssertJ中测试一件事是否成立

  11. 11

    如何选择数组中的最后一件事?

  12. 12

    首先在HashMap中获得第一件事?

  13. 13

    android中的任务堆栈和后堆栈是同一件事吗

  14. 14

    不同目录中的相同名称是同一件事吗?

  15. 15

    如何根据值在不同列中显示一件事的结果

  16. 16

    从一行中获取一件事,然后将其与另一行中的一件事连接起来

  17. 17

    这两段代码代表同一件事吗?有性能差异吗?

  18. 18

    代码必须先做一件事,然后等待几秒钟,然后继续

  19. 19

    向阿格达证明我们在谈论同一件事

  20. 20

    我可以在 TypeScript 函数签名中将两个“任何”标记为同一件事吗?

  21. 21

    使用jQuery检查某个元素是否是另一个元素中的第一件事

  22. 22

    我想将我的变量放在 google Piechart 中,但它一直从选择中选择最后一件事

  23. 23

    如果在数组中找到元素,则尝试打印一件事;如果不在C中,则尝试打印其他内容

  24. 24

    我刚刚克隆了一个仓库,它在Github中说的第一件事是“未提交的更改”?与CRLF不相关

  25. 25

    我刚刚克隆了一个仓库,它在Github中说的第一件事是“未提交的更改”?与CRLF不相关

  26. 26

    我将如何提高效率(不要一遍又一遍地重复同一件事)?

  27. 27

    @IBAction仅仅是Swift中的一种语法,还是@Something意味着Swift中的一件事?

  28. 28

    您如何使javascript变量不止一件事情?

  29. 29

    这样在CSS中传递参数是一件事情吗?

热门标签

归档