[已解决]JS代码 遍历按钮同时改变相应索引

只是那个人

1.     var but = document.querySelectorAll(".button1");
   
2.     var videos = document.querySelector("video");
   
3.     for (var i = 0; i < but.length; i++) {
   
4.       but[i].addEventListener("click", function () {
   
5.         videos.src = "./video/" + i + ".mp4";
   
6.       });
   
7.     }

复制代码

元素选择：使用 document.querySelectorAll(".button1") 选择了所有具有类名 button1 的元素，并将它们存储在 but 数组中。然后，通过 document.querySelector("video") 选择了视频元素。
循环和事件处理程序：通过一个 for 循环遍历 but 数组，并为每个按钮添加了一个点击事件处理程序。当点击按钮时，会设置视频的 src 属性为 ./video/ 加上当前按钮的索引（i）再加 .mp4 的文件路径。

我想得到的得效果是
点击but[0] 按钮得到videos.src = "./video/0.mp4";
点击but[1] 按钮得到videos.src = "./video/1.mp4";
点击but[2] 按钮得到videos.src = "./video/2.mp4";
点击but[3] 按钮得到videos.src = "./video/3.mp4";

但是报错，不知道哪错了
       

最佳答案

月排行榜 / 总排行榜

FishC

2024-2-24 09:33:31

你的代码中有一个小问题。在 for 循环内部，你为每个按钮添加了相同的点击事件处理程序，但是这个事件处理程序使用了循环结束后的 i 值，这时候 i 的值等于 but.length。因此，当任何一个按钮被点击时，都会使用这个相同的 i 值来更新视频的 src 属性。

为了解决这个问题，你可以使用闭包来创建一个独立的作用域，以便保存每个按钮的索引。这样，当按钮被点击时，它所属的索引值将会被正确地传递给事件处理程序。

下面是一个修正后的代码示例：

var buttons = document.querySelectorAll(".button1");
var videos = document.querySelector("video");

for (var i = 0; i < buttons.length; i++) {
  (function(index) {
    buttons[index].addEventListener("click", function() {
      videos.src = "./video/" + index + ".mp4";
    });
  })(i);
}

在这个修正后的代码中，我们使用了一个立即执行函数（IIFE）来创建一个独立的作用域，并将当前的索引值作为参数传递给这个函数。这样，每个按钮的点击事件处理程序就能够使用其对应的索引值来更新视频的 src 属性了。

希望这能够帮助到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

你的代码中有一个小问题。在 for 循环内部，你为每个按钮添加了相同的点击事件处理程序，但是这个事件处理程序使用了循环结束后的 i 值，这时候 i 的值等于 but.length。因此，当任何一个按钮被点击时，都会使用这个相同的 i 值来更新视频的 src 属性。

为了解决这个问题，你可以使用闭包来创建一个独立的作用域，以便保存每个按钮的索引。这样，当按钮被点击时，它所属的索引值将会被正确地传递给事件处理程序。

下面是一个修正后的代码示例：

var buttons = document.querySelectorAll(".button1");
var videos = document.querySelector("video");

for (var i = 0; i < buttons.length; i++) {
  (function(index) {
    buttons[index].addEventListener("click", function() {
      videos.src = "./video/" + index + ".mp4";
    });
  })(i);
}

在这个修正后的代码中，我们使用了一个立即执行函数（IIFE）来创建一个独立的作用域，并将当前的索引值作为参数传递给这个函数。这样，每个按钮的点击事件处理程序就能够使用其对应的索引值来更新视频的 src 属性了。

希望这能够帮助到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

只是那个人

FishC 发表于 2024-2-24 09:33
你的代码中有一个小问题。在 for 循环内部，你为每个按钮添加了相同的点击事件处理程序，但是这个事件处理 ...

感谢，问题解决了，只是我现阶段还不理解什么是闭包，可以简单解释一下吗？

FishC

只是那个人 发表于 2024-02-24 09:51
感谢，问题解决了，只是我现阶段还不理解什么是闭包， ...

当一个函数内部定义的函数引用了外部函数的变量时，就创建了一个闭包。闭包可以访问和操作外部函数的变量，即使外部函数已经执行完毕并且其作用域已经销毁了。

闭包的一个常见应用是在循环中创建带有独立作用域的事件处理程序。在循环中使用立即执行函数，可以创建多个独立的作用域，每个作用域都会保存当前循环迭代的变量值。

在上面的代码示例中，我们使用立即执行函数来创建了一个闭包。这个闭包接收一个参数 index，它保存了当前循环迭代的索引值。这样，每个按钮的点击事件处理程序都能够独立地访问自己对应的索引值。

通过使用闭包，我们避免了循环结束后 i 值的问题，确保每个事件处理程序都使用了正确的索引值。

希望这简单的解释对你有帮助！如果你还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。