JS多轮播图开发中获取circle类span元素返回空列表求助

问题根源 #

你的代码let dots = document.getElementById("slideshow" + String(slideshow)).getElementsByClassName("circle");返回空列表，核心原因是：.circle元素不在id="slideshow0"的div内部。从HTML结构能看到，.circle放在.points容器里，而.points和#slideshow0是同级的兄弟节点，都属于父级的.slideshow容器，所以从#slideshow0内部查找自然找不到。

解决方案 #

以下几种方式都能解决这个问题，根据你的代码习惯选择：

1. 基于兄弟元素选择（无需修改HTML）

利用CSS相邻兄弟选择器，直接定位到#slideshowX后面的.points容器里的.circle：

let dots = document.querySelectorAll("#slideshow" + String(slideshow) + " + .points .circle");

或者先获取#slideshowX的父容器，再从父容器里查找：

let slideshowParent = document.getElementById("slideshow" + String(slideshow)).parentElement;
let dots = slideshowParent.getElementsByClassName("circle");

2. 给.points添加对应索引ID（更直观）

修改HTML，给每个轮播的.points加上和轮播对应的ID：

<div class="points" id="points0">
  <span class="circle" onclick="goToSlide(1, 0)"></span>
  <span class="circle" onclick="goToSlide(2, 0)"></span>
  <span class="circle" onclick="goToSlide(3, 0)"></span>
  <span class="circle" onclick="goToSlide(4, 0)"></span>
</div>

然后在JS里直接通过ID选中：

let dots = document.getElementById("points" + String(slideshow)).getElementsByClassName("circle");

3. 统一父容器索引（推荐，扩展性更好）

给每个轮播的父级.slideshow容器加上索引ID，这样可以统一管理轮播内的所有元素：

<div class="slideshow" id="slideshow-container0">
  <div id="slideshow0">...</div>
  <div class="points">...</div>
</div>

JS代码里统一从父容器获取元素：

let container = document.getElementById("slideshow-container" + String(slideshow));
let slides = container.getElementsByClassName("slides"); // 原逻辑也可以复用这个容器
let dots = container.getElementsByClassName("circle");

验证方法 #

可以先在浏览器控制台测试选择器是否有效，比如输入：

document.querySelectorAll("#slideshow0 + .points .circle")

如果能返回4个.circle元素，说明选择器没问题，再把代码替换到你的JS里即可。

内容的提问来源于stack exchange，提问作者SieB-8