Lompat ke nombor halaman dalam jquery

Dengan pembangunan berterusan Internet, halaman web semakin tidak dapat dipisahkan daripada teknologi bahagian hadapan, dan jQuery, sebagai rangka kerja bahagian hadapan yang sangat baik, digunakan secara meluas dalam pembangunan web. Dalam reka bentuk web, selalunya perlu untuk melaksanakan fungsi melompat ke nombor halaman yang ditentukan Seterusnya, kami akan memperkenalkan kaedah melompat ke nombor halaman dalam jQuery.

1. Dapatkan nombor halaman semasa

Sebelum melompat ke nombor halaman, anda perlu mendapatkan nombor halaman semasa terlebih dahulu. Anda boleh mencari elemen nombor halaman semasa dalam kawalan halaman melalui kelas atau id, dan kemudian mendapatkan kandungan teksnya.

Sebagai contoh, dalam kod berikut, pemilih kelas digunakan untuk mendapatkan elemen bernama "semasa" dan mendapatkan kandungan teksnya, iaitu nombor halaman semasa:

var currentPage = $(".current").text();

2. Ikat acara klik

Seterusnya, anda perlu mengikat acara klik pada setiap nombor halaman dalam kawalan halaman, supaya lompatan halaman boleh dicetuskan apabila pengguna mengklik pada nombor halaman.

Anda boleh menggunakan fungsi on() yang disediakan oleh jQuery untuk mengikat acara kepada elemen. Contohnya, dalam kod berikut, gunakan pemilih kelas untuk mendapatkan semua elemen bernama "halaman" dan ikat peristiwa klik padanya:

$(".page").on("click", function () {
  //TODO:处理点击事件
});

3. Kendalikan acara klik

Apabila pengguna mengklik nombor halaman Apabila menggunakan nombor, anda perlu mendapatkan nombor halaman yang diklik oleh pengguna dan melompat ke halaman yang sepadan. Dalam acara klik, gunakan kata kunci ini untuk mendapatkan elemen nombor halaman yang diklik oleh pengguna, dan dapatkan kandungan teksnya, iaitu nombor nombor halaman yang diklik oleh pengguna.

Sebagai contoh, dalam kod berikut, gunakan kata kunci ini untuk mendapatkan elemen nombor halaman yang diklik oleh pengguna dan dapatkan kandungan teksnya:

var target = $(this).text();

Seterusnya, hantar nombor nombor halaman yang diperoleh sebagai parameter kepada Fungsi lompat jumpToPage() menggunakan sifat window.location.href yang disediakan oleh JavaScript untuk melompat ke halaman.

Sebagai contoh, dalam kod berikut, fungsi lompat jumpToPage() ditakrifkan, dan fungsi dipanggil dalam acara klik untuk melompat ke halaman:

function jumpToPage(targetPage) {
  //TODO: 跳转到指定页码
  window.location.href = "http://www.example.com/page/" + targetPage;
}

$(".page").on("click", function () {
  var target = $(this).text();
  jumpToPage(target);
});

4 🎜>

Menggabungkan langkah di atas, kita boleh memberikan contoh jQuery yang lengkap untuk melompat ke nombor halaman, seperti yang ditunjukkan di bawah:

//获取当前页码
var currentPage = $(".current").text();

//定义跳转函数
function jumpToPage(targetPage) {
  window.location.href = "http://www.example.com/page/" + targetPage;
}

//为页码数字绑定点击事件
$(".page").on("click", function () {
  var target = $(this).text();
  jumpToPage(target);
});

Ringkasan

Melalui langkah di atas, kita boleh menyedari lompatan yang mudah dan praktikal Putar fungsi nombor halaman. Walau bagaimanapun, perlu diingatkan bahawa artikel ini hanyalah contoh mudah, dan pengendalian logik dan ralat yang lebih kompleks mungkin diperlukan dalam pembangunan sebenar. Pada masa yang sama, jika anda menggunakan pemalam paging berasaskan jQuery, mungkin terdapat kaedah yang lebih mudah dan boleh disesuaikan untuk melaksanakan fungsi lompat halaman.

Atas ialah kandungan terperinci Lompat ke nombor halaman dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!