Javascript 在单击时更改页面的功能可以无理由工作

所以我试着制作一个类似于w3schools的函数。该功能需要管理两件事。1.调用当前页面时，将“.active”类添加到点。2.当用户点击点进入该页面时

在我的代码中，如果我在通过函数示例（dots[sliderIndex].classList.add（“active”）；）添加类时留出一些空间，现在可以在该页面上单击并继续，但如果我剪切空间（dots[sliderIndex].classList.add（“active”）；）现在显示活动状态，但单击点不起作用。这让我很困惑…请，伙计们，如果你们能向我解释一下背后的逻辑，以及如何使这项工作起作用

//*第二个滑块*
var sliderIndex=0；
设next2=document.querySelector（“.next2”）；
设prev2=document.querySelector（“.prev2”）；
函数showNews（n）{
调试器；
常量滑块=document.getElementsByClassName（“新闻”）；
const dots=document.getElementsByClassName（“dot”）；
对于（i=0；islider.length-1）{
sliderIndex=0；
}
对于（i=0；i
#第三节幻灯片-容器2.查看更多信息：悬停{
颜色：#242121；
}
#第三节幻灯片-容器2#点{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}
#第三节幻灯片-容器2.点{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
-webkit过渡：背景色0.6s轻松；
过渡：背景色0.6s；
}
#第三节幻灯片-容器2.点：悬停，
#第三节幻灯片-container2.dot.active{
背景：黑色；
}
.主动{
背景：红色
}

我们的人民是最宝贵的财富
媒体室
与其拥有大量功能，不如只需少量功能即可实现所需功能

因此，让我们澄清一下事情是如何运作的：


div.news
最初是隐藏的
点（
span.dot
元素）是通过
JavaScript
在页面加载时添加的，因此在添加新的
div.news
时（或在后台创建页面时），您不必手动添加新点
标记中添加了两个
数据-*
：

data slideshow index
：添加到
span.dot
元素中（如上所述，由
JavaScript
完成），该元素保存
div.news
的索引，单击该点时将显示
div.news
data slideshow role
：添加到
a.cycle
（上一个和下一个功能的最后两个
a
标记），用于定义
a.cycle
（下一个或上一个）的角色

获取要显示的
div.news
索引的函数具有显示/隐藏功能（甚至是点的类操作）
类（
active
）用于显示幻灯片（
div.news
），因此不再使用
.style.display
）
从技术上讲，没有使用显式循环（换句话说，对于

循环，没有使用

），所有循环都是通过内置的、和方法完成的
此外，在
JavaScript
部分中使用该方法直接处理事件

让我们简而言之，这是一个有效的演示，它还包含大量有用的注释，在阅读时应该会对您有所帮助（主要是
JavaScript
部分）：


/**
*新闻：存储在页面中找到的“div.news”的数组。
*dotswraper：在页面加载中添加“span.dot”的“div#dots”。
*nextPrev：保存next和prev锚定标记（具有“数据幻灯片角色”的标记）的数组。
*showSlide（idx）：用于显示/隐藏幻灯片的函数（“div.news”）。
@param idx要显示的“div.news”的索引。
*角色：一个普通对象，它包含两个助手函数，由“a.cycle”使用，以便根据其“数据幻灯片放映角色”和要显示的“div.news”索引来区分哪个角色（显示下一张或上一张幻灯片）。
*点：存储“span.dot”元素的数组（在页面加载时填充）。
**/
const news=[…document.querySelectorAll（'.news'）]，
dotswraper=document.getElementById（'dots'），
nextPrev=[…document.querySelectorAll（'.cycle'）]，
showSlide=idx=>{
/**获取当前显示的幻灯片**/
const currVisible=news.find（el=>el.classList.contains（'visible'），
/**获取当前活动的“span.dot”**/
currActive=dots.find（d=>d.classList.contains（'active'）；
/**隐藏最后显示的幻灯片**/
currVisible&&currVisible.classList.remove（'visible'）；
/**在索引“idx”处显示幻灯片**/
新闻[idx].classList.add（'visible'）；
/**从上次激活的“span.dot”中删除“active”类**/
currActive&&currActive.classList.remove（'active'）；
/**索引“idx”处的“span.dot”变为活动状态**/
dots[idx].classList.add（'active'）；
},
角色={
/**函数来显示下一个幻灯片角色*