如何让这段JS代码作用于所有匹配ID的元素而非仅第一个？

你的问题出在document.querySelector()只会返回第一个匹配选择器的元素，所以只有第一个tb-drag-scroll-*元素能生效。要让所有匹配元素都支持拖拽滚动，需要做以下修改：

1. 改用document.querySelectorAll()获取所有符合条件的元素
2. 为每个元素单独绑定事件逻辑，确保每个元素拥有独立的状态变量（避免全局变量冲突）

修改后的完整代码：

// 获取所有ID以tb-drag-scroll-开头的元素
const dragScrollElements = document.querySelectorAll('[id^="tb-drag-scroll-"]');

// 遍历每个元素，初始化拖拽滚动功能
dragScrollElements.forEach(element => {
  // 每个元素独立维护拖拽状态
  let isDown = false;
  let startX;
  let scrollLeft;

  element.addEventListener("mousedown", (e) => {
    isDown = true;
    element.classList.add("active");
    startX = e.pageX - element.offsetLeft;
    scrollLeft = element.scrollLeft;
  });

  element.addEventListener("mouseleave", () => {
    isDown = false;
    element.classList.remove("active");
  });

  element.addEventListener("mouseup", () => {
    isDown = false;
    element.classList.remove("active");
  });

  element.addEventListener("mousemove", (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - element.offsetLeft;
    const walk = x - startX;
    element.scrollLeft = scrollLeft - walk;
  });
});

关键修改点说明： #

• 获取所有元素：querySelectorAll会返回所有匹配的元素节点列表，而不是单个元素
• 独立状态变量：把isDown、startX、scrollLeft放在forEach的回调函数内部，每个元素都有自己的状态副本，不会出现多个元素互相干扰的情况
• 绑定到当前元素：所有事件处理函数中都使用element指代当前遍历的元素，确保操作的是触发事件的目标元素

内容的提问来源于stack exchange，提问作者nilemonster