轮播图点击按钮不能切换图片，绑定的 onclick 事件中 this 却指向了 window？
问题描述：
轮播图中，小圆点按钮点击后不能切换对应的图片，并且绑定的 onclick 事件中的 this 总是指向 window 而不是当前按钮。
分析：
根据提供的代码，我们可以发现以下几点：
小圆点按钮的 onclick 事件绑定如下：
points[i].onclick = function () { index = this.index chageall();};
当小圆点按钮被点击时，this 指向了 window，导致无法访问当前按钮的 index 属性。
原因：
该问题可能是由箭头函数引起的。箭头函数的 this 不是指向函数被调用的对象，而是指向定义函数时所在的上下文环境，在本例中即指向 window。
解决方案：
为了解决此问题，可以通过以下两种方法之一：
使用常规函数：将小圆点按钮的 onclick 事件修改为常规函数，这样 this 将指向按钮元素。
points[i].onclick = function () { chageall(i);};function chageall(index) { // ...}
使用箭头函数时绑定 this：使用箭头函数时，可以通过 bind() 方法将 this 绑定到按钮元素。
points[i].onclick = function () { chageall.bind(this, i)();}.bind(points[i]);
完整代码：
经过修改后，完整的代码如下：
/* * 需求 1. 默认自动轮播状态 小圆点跟随推片变化而变化 2. 触发状态 当鼠标悬浮小圆点发生样式改变并且不在轮播 当鼠标进行点击的时候，对应小圆点的图片发生改变 3.鼠标悬浮左右按键的时候，图片不在轮播 当点击的时候，会根据当前图片的位置发生往后或往前的变化 */window.onload = function () { //1.进行元素的获取 // 获取图片 let imgs = document.querySelectorAll("#img-list li "); // 获取小圆点 let points = document.querySelectorAll("#points a"); // 获取左右按钮 let btns = document.querySelectorAll(".btn"); // 定义当前显示的下标 let index = 0; // 定义timer let timer; //2.设计方法让所有的图片隐藏 function hiddenImages() { for (let i = 0; i < imgs.length; i++) { imgs[i].style.opacity = 0; } } // 3.设计方法让所有的小圆点处于隐藏的状态 function hiddenPoints() { for (let i = 0; i imgs.length - 1) { index = 0; } }, 3000) } carousel(); // 6.进行小圆点的触发 for (let i = 0; i < points.length; i++) { // 悬浮进行定时器停止 points[i].onmouseover = function () { clearInterval(timer); }; // 鼠标离开继续轮播 points[i].onmouseout = function () { carousel(); }; points[i].index = i; points[i].onclick = chageAll.bind(points[i], i); }};
以上就是轮播图点击按钮无效：为什么我的`onclick`事件中的`this`指向了`window`而不是按钮？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1498848.html
微信扫一扫 
支付宝扫一扫 
