如何讓這個 JS 適用於所有元素，而不是第一個元素？

Question

我有以下代碼，當與右 CSS 配對時，它允許您在元素上拖動和滾動，即使在桌面上也是如此。

querySelector基於包含tb-drag-scroll-的 ID 工作

我在同一頁面上有多個元素，其 ID 與此匹配...例如

<div id="tb-drag-scroll-1"></div>
<div id="tb-drag-scroll-2"></div>

但是，JS 僅適用於第一個 div。 我明白為什么（有點），但我正在努力重新編寫代碼，以便它適用於具有匹配 ID 的每個元素。 誰能幫忙？

const dragScroll = document.querySelector('[id^="tb-drag-scroll-"]')
let isDown = false
let startX
let scrollLeft

dragScroll.addEventListener("mousedown", (e) => {
  isDown = true
  dragScroll.classList.add("active")
  startX = e.pageX - dragScroll.offsetLeft
  scrollLeft = dragScroll.scrollLeft
})
dragScroll.addEventListener("mouseleave", () => {
  isDown = false
  dragScroll.classList.remove("active")
})
dragScroll.addEventListener("mouseup", () => {
  isDown = false
  dragScroll.classList.remove("active")
})
dragScroll.addEventListener("mousemove", (e) => {
  if (!isDown) return
  e.preventDefault()
  const x = e.pageX - dragScroll.offsetLeft
  const walk = x - startX
  dragScroll.scrollLeft = scrollLeft - walk
  console.log(walk)
})

我試圖根據這個 scope 重寫，但無法讓它工作。

Answer 1

使用querySelectorAll因為你想用那個 id 影響你的所有 div，然后遍歷它們。 由於querySelectorAll返回一個類似於 object 的數組，您希望通過其索引訪問每個元素

 const dragScroll = document.querySelectorAll('[id^="tb-drag-scroll-"]') let isDown = false let startX let scrollLeft for (let i = 0; i < dragScroll.length; i++) { dragScroll[i].addEventListener("mousedown", (e) => { isDown = true dragScroll[i].classList.add("active") startX = e.pageX - dragScroll[i].offsetLeft scrollLeft = dragScroll[i].scrollLeft }) dragScroll[i].addEventListener("mouseleave", () => { isDown = false dragScroll[i].classList.remove("active") }) dragScroll[i].addEventListener("mouseup", () => { isDown = false dragScroll[i].classList.remove("active") }) dragScroll[i].addEventListener("mousemove", (e) => { if (.isDown) return e.preventDefault() const x = e.pageX - dragScroll[i].offsetLeft const walk = x - startX dragScroll[i].scrollLeft = scrollLeft - walk console.log(walk) }) }

 <div id="tb-drag-scroll-1">div1</div> <div id="tb-drag-scroll-2">div2</div>

Answer 2

感謝所有的答案......結合評論中的建議，看起來最好的方法是：

const dragScroll = document
  .querySelectorAll('[id^="tb-drag-scroll-"]')
  .forEach((dragScroll) => {
    let isDown = false
    let startX
    let scrollLeft

    dragScroll.addEventListener("mousedown", (e) => {
      isDown = true
      dragScroll.classList.add("active")
      startX = e.pageX - dragScroll.offsetLeft
      scrollLeft = dragScroll.scrollLeft
    })
    dragScroll.addEventListener("mouseleave", () => {
      isDown = false
      dragScroll.classList.remove("active")
    })
    dragScroll.addEventListener("mouseup", () => {
      isDown = false
      dragScroll.classList.remove("active")
    })
    dragScroll.addEventListener("mousemove", (e) => {
      if (!isDown) return
      e.preventDefault()
      const x = e.pageX - dragScroll.offsetLeft
      const walk = x - startX
      dragScroll.scrollLeft = scrollLeft - walk
      console.log(walk)
    })
  })