cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk memilih semua elemen dalam kod penomboran Bootstrap menggunakan JavaScript?

Saya menggunakan Bootstrap untuk tapak web yang saya sediakan. Memandangkan bar skrol limpahan kelihatan buruk, saya menyembunyikannya dengan CSS dan cuba menatal penomboran dengan roda tetikus melalui JavaScript.

Apabila saya menggunakan kod yang diberikan di bawah, kod atas berfungsi tetapi kod bawah tidak berfungsi. Apabila saya memberikan [0,1] sebagai nilai indeks dalam kod JavaScript, kali ini nilai indeks bawah berfungsi tetapi nilai indeks teratas tidak berfungsi. Bagaimanakah saya boleh menjadikannya berfungsi pada dua penomboran pada halaman yang sama? Daripada apa yang saya faham daripada penyelidikan, saya mungkin perlu menggunakan let 或 var 变量而不是 const. 

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粉165522886314 hari yang lalu363

membalas semua(1)saya akan balas

  • P粉676821490

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

    Anda boleh menggunakan querySelectorAll untuk mendapatkan semua elemen kelas itu dan kemudian mengulanginya untuk menambah pendengar acara pada setiap elemen. 

    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();
    }
  });
});

    balas
    0
  • Batalbalas