多个元素的动态Javascript代码答案

【问题标题】：Dynamic Javascript code for multiple elements多个元素的动态Javascript代码
【发布时间】：2021-10-21 07:35:53
【问题描述】：

此脚本为滑块添加了可拖动功能，但问题是当我们有多个滑块时，只有第一个滑块有效，其余滑块无效。如何更改此脚本，以便页面上的任意数量的滑块，每个滑块都可以单独拖动并正常工作???

事实上，我们的目标是在脚本中定义一个类而不是id，通过将它应用到任何滑块元素，滑块可以是可拖动的???

   document.addEventListener('DOMContentLoaded', function () {
      const ele = document.getElementById('container');
      ele.style.cursor = 'grab';

      let pos = { top: 0, left: 0, x: 0, y: 0 };

      const mouseDownHandler = function (e) {
        ele.style.cursor = 'grabbing';
        ele.style.userSelect = 'none';

        pos = {
          left: ele.scrollLeft,
          top: ele.scrollTop,
          // Get the current mouse position
          x: e.clientX,
          y: e.clientY,
        };

        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
      };

      const mouseMoveHandler = function (e) {
        // How far the mouse has been moved
        const dx = e.clientX - pos.x;
        const dy = e.clientY - pos.y;

        // Scroll the element
        ele.scrollTop = pos.top - dy;
        ele.scrollLeft = pos.left - dx;
      };

      const mouseUpHandler = function () {
        ele.style.cursor = 'grab';
        ele.style.removeProperty('user-select');

        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
      };

      // Attach the handler
      ele.addEventListener('mousedown', mouseDownHandler);
    });

#container {
      margin: 50px auto;
      border: 2px solid #ccc;
      border-radius: 10px;
      display: flex;
      width: 80%;
      gap: 1rem;
    }

    .item {
      border: 1px solid #cbd5e0;
      font-size: 2.25rem;
    }

    small {
      width: 150px;
      height: 150px;
      align-items: center;
      display: flex;
      justify-content: center;
    }

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>HTML DOM - Drag to scroll</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/css/demo.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap" />

</head>

<body>

  <div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


<div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


</body>

</html>

【问题讨论】：

标签： javascript function slider

【解决方案1】：

您只需要使用document.querySelectorAll 来获取您想要的所有元素而不是一个，然后将其余函数包装在forEach 函数中：

document.addEventListener('DOMContentLoaded', function () {
    [...document.querySelectorAll('#container')].forEach(ele => {
        // your code
    });
});

document.addEventListener('DOMContentLoaded', function () {
    [...document.querySelectorAll('#container')].forEach(ele => {
        ele.style.cursor = 'grab';

        let pos = { top: 0, left: 0, x: 0, y: 0 };

        const mouseDownHandler = function (e) {
            ele.style.cursor = 'grabbing';
            ele.style.userSelect = 'none';

            pos = {
                left: ele.scrollLeft,
                top: ele.scrollTop,
                // Get the current mouse position
                x: e.clientX,
                y: e.clientY,
            };

            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        };

        const mouseMoveHandler = function (e) {
            // How far the mouse has been moved
            const dx = e.clientX - pos.x;
            const dy = e.clientY - pos.y;

            // Scroll the element
            ele.scrollTop = pos.top - dy;
            ele.scrollLeft = pos.left - dx;
        };

        const mouseUpHandler = function () {
            ele.style.cursor = 'grab';
            ele.style.removeProperty('user-select');

            document.removeEventListener('mousemove', mouseMoveHandler);
            document.removeEventListener('mouseup', mouseUpHandler);
        };

        // Attach the handler
        ele.addEventListener('mousedown', mouseDownHandler);
    });
});

#container {
      margin: 50px auto;
      border: 2px solid #ccc;
      border-radius: 10px;
      display: flex;
      width: 80%;
      gap: 1rem;
    }

    .item {
      border: 1px solid #cbd5e0;
      font-size: 2.25rem;
    }

    small {
      width: 150px;
      height: 150px;
      align-items: center;
      display: flex;
      justify-content: center;
    }

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>HTML DOM - Drag to scroll</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/css/demo.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap" />

</head>

<body>

  <div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


<div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


</body>

</html>

但是您应该将 id 更改为 class，因为您的 DOM 中不应该有重复的 id。

【讨论】：