简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Fragen und Antworten  >  Hauptteil

Wie wähle ich mit JavaScript alle Elemente im Bootstrap-Paginierungscode aus?

Ich verwende Bootstrap für eine Website, die ich vorbereite. Da die Überlauf-Bildlaufleiste schlecht aussah, habe ich sie mit CSS ausgeblendet und versucht, die Paginierung mit dem Mausrad über JavaScript zu scrollen.

Wenn ich den unten angegebenen Code verwende, funktioniert der obere Code, der untere Code jedoch nicht. Wenn ich im JavaScript-Code [0,1] als Indexwert angebe, funktioniert diesmal der untere Indexwert, aber der obere Indexwert nicht. Wie kann ich dafür sorgen, dass es bei zwei Paginierungen auf derselben Seite funktioniert? Soweit ich aus der Forschung weiß, muss ich möglicherweise let 或 var 变量而不是 const verwenden. 

const container = document.querySelectorAll(".table-responsive")[0];
container.addEventListener("wheel", function (e) {
  if (e.deltaY > 0) {
    container.scrollLeft += 100;
    e.preventDefault();
  } else {
    container.scrollLeft -= 100;
    e.preventDefault();
  }
});
.table-responsive::-webkit-scrollbar {
  width: 0 !important;
}

.content {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Hello, world!</title>
</head>
<br>
<br>

<body>
  <div class="container">
    <nav aria-label="Page navigation example" class="table-responsive">
      <ul class="pagination justify-content-between pagination-md">
        <li class="page-item m-1 active"><a class="page-link" href="#">1</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">2</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">3</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">4</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">5</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">6</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">7</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">8</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">9</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">10</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">11</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">12</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">13</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">14</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">15</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">16</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">17</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">18</a>
        </li>

      </ul>
    </nav>
    <div class="content">
      Some Page Content
    </div>

    <nav aria-label="Page navigation example" class="table-responsive">
      <ul class="pagination justify-content-between pagination-md">
        <li class="page-item m-1 active"><a class="page-link" href="#">1</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">2</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">3</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">4</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">5</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">6</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">7</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">8</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">9</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">10</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">11</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">12</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">13</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">14</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">15</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">16</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">17</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">18</a>
        </li>

      </ul>
    </nav>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

</body>

</html>

P粉165522886P粉165522886236 Tage vor314

Antworte allen(1)Ich werde antworten

  • P粉676821490

    P粉6768214902024-02-26 10:31:15

    您可以使用 querySelectorAll 获取该类的所有元素，然后循环遍历它们以向每个元素添加一个事件侦听器。

    const containers = document.querySelectorAll(".table-responsive");
containers.forEach(container => {
  container.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
    } else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  });
});

    Antwort
    0
  • StornierenAntwort