JavaScript onclick无效果的原因之一

var img = document.querySelector('.big img');
var imgs = document.querySelectorAll('.a');
console.log(img);
for (var i = 0; i < imgs.length; i++ ) {
    console.log(imgs[i]);
}
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function() {
        img.src = imgs[i].href;
        return false;
    }
}

为什么这段代码的onclick事件没有效果?

这段代码的 onclick 事件没有效果的原因在于变量 i 的作用域问题。在这段代码中，i 是通过 var 关键字声明的，这使得它具有函数作用域（而不是块级作用域）。这意味着在 onclick 函数内部引用的 i 实际上是循环结束后的 i 的值，而不是你在设置事件监听器时的 i 的值。

在最后一个循环结束后，i 的值将等于 imgs.length，因为这是循环终止的条件。所以当点击事件发生时，imgs[i] 实际上是在尝试访问 imgs[imgs.length]，这是一个不存在的元素（超出数组界限），因此 imgs[i] 是 undefined，并且 imgs[i].href 也就是 undefined。

这个问题可以通过使用闭包或者更现代的 let 关键字来解决，后者会为循环体中的每次迭代创建一个新的作用域。

使用闭包解决：

for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = (function(i) {
        return function() {
            img.src = imgs[i].href;
            return false;
        };
    })(i);
}

使用 let 关键字解决（推荐的方式，因为它更简洁明了）：

for (let i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function() {
        img.src = imgs[i].href;
        return false;
    };
}

这样，每次循环迭代都会为 i 创建一个新的绑定，每个 onclick 事件处理器都会引用正确的 i 值。

此外，还有一点需要注意的是，如果 .a 选择器是用于选择 标签，那么 imgs[i].href 可能不是你想要设置为 img.src 的值，因为 href 属性通常用于指向文档，而不是图像文件。如果 .a 是指向图像文件的链接，那么你可能需要使用 getAttribute('href') 或者适当的属性来获取正确的图像 URL。同时，如果 .a 是 标签，那么你可能需要阻止默认的链接跳转行为，这可以通过 event.preventDefault() 或者在 onclick 事件处理器中返回 false 来实现。

总结

• 使用let
• 使用闭包
• 直接通过document获取元素然后修改，不要使用 i

写在最后，AI牛逼

封面图