Bagaimana untuk melaksanakan senarai produk dengan jquery

Dengan perkembangan berterusan Internet, industri e-dagang menjadi semakin popular. Dalam industri ini, penyenaraian produk adalah sangat penting. Senarai produk membolehkan pengguna menyemak imbas dan membeli produk dengan lebih cepat. Untuk melaksanakan fungsi senarai produk dengan lebih baik, kita boleh menggunakan jquery, rangka kerja hadapan yang sangat baik.

1. Fahami jquery

jQuery ialah perpustakaan JavaScript untuk pengguna berinteraksi di halaman web. Ia memudahkan operasi antara HTML dan JavaScript. Tujuan reka bentuk jQuery ialah "tulis kurang, buat lebih", yang bermaksud menulis kurang kod dan melakukan lebih banyak perkara. Menggunakan jQuery, pembangun boleh menyelesaikan banyak tugas dengan mudah seperti manipulasi DOM, pengendalian acara, kesan animasi dan banyak lagi.

2. Bagaimana untuk melaksanakan senarai produk melalui jquery

1. Gunakan Ajax untuk mendapatkan data

Sebelum melaksanakan senarai produk, kita perlu menyediakan beberapa Secara amnya, anda boleh Menyediakan antara muka data produk di bahagian pelayan. Untuk mendapatkan data dengan lebih pantas, kita boleh menggunakan Ajax untuk mendapatkan data secara tidak segerak.

$.ajax({
  url: 'http://www.example.com/api/goods',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(err) {
    console.log(err);
  }
});

2. Jana senarai produk melalui gelung

Selepas mendapatkan data, kami boleh mengulangi setiap produk dan kemudian memaparkan data produk ke dalam halaman . Berikut ialah contoh mudah:

$.ajax({
  url: 'http://www.example.com/api/goods',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var $list = $('#goods-list');
    var html = '';

    $.each(data, function(index, item) {
      html += '<li>';
      html += '<img src="&#39; + item.image + &#39;">';
      html += '<h3>' + item.title + '</h3>';
      html += '<p>' + item.price + '</p>';
      html += '</li>';
    });

    $list.html(html);
  },
  error: function(err) {
    console.log(err);
  }
});

3. Tambah kesan interaktif

Selain senarai produk ringkas, kami juga boleh menambah beberapa kesan interaktif pada senarai produk untuk Tingkatkan pengalaman pengguna. Contohnya, apabila pengguna menuding tetikus pada item, item tersebut akan menjadi gelap atau memaparkan lebih banyak maklumat. Berikut ialah contoh mudah:

$('#goods-list').on('mouseenter', 'li', function() {
  $(this).css('opacity', 0.8);
}).on('mouseleave', 'li', function() {
  $(this).css('opacity', 1);
});

4. Melaksanakan fungsi carian

Dalam aplikasi praktikal, senarai produk biasanya sangat panjang, jadi kami juga perlu menambah Fungsi carian. Melalui jquery, apabila pengguna memasukkan kata kunci, kami boleh menapis semua produk yang mengandungi kata kunci dalam masa nyata. Berikut ialah contoh mudah:

$('#search-input').on('input', function() {
  var keyword = $(this).val().trim();
  var $list = $('#goods-list');
  var $items = $list.find('li');

  $items.each(function(index, item) {
    var title = $(item).find('h3').text();
    if (title.indexOf(keyword) !== -1) {
      $(item).show();
    } else {
      $(item).hide();
    }
  });
});

5. Pelaksanaan halaman

Akhir sekali, kami juga perlu melaksanakan paging untuk senarai produk. Dalam contoh di atas, kami hanya memaparkan semua produk ke dalam halaman. Walau bagaimanapun, apabila terdapat sejumlah besar item, pengguna mungkin perlu menyemak imbas dalam halaman. Berikut ialah contoh mudah:

var $list = $('#goods-list');
var PAGE_SIZE = 10;

function renderList(data, page) {
  var html = '';
  var start = (page - 1) * PAGE_SIZE;
  var end = start + PAGE_SIZE;
  var pageData = data.slice(start, end);

  $.each(pageData, function(index, item) {
    html += '<li>';
    html += '<img src="&#39; + item.image + &#39;">';
    html += '<h3>' + item.title + '</h3>';
    html += '<p>' + item.price + '</p>';
    html += '</li>';
  });

  $list.html(html);
}

$.ajax({
  url: 'http://www.example.com/api/goods',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    renderList(data, 1);
  },
  error: function(err) {
    console.log(err);
  }
});

$('#prev').on('click', function() {
  var page = parseInt($('#current-page').text());

  if (page > 1) {
    page -= 1;
    $('#current-page').text(page);
    renderList(data, page);
  }
});

$('#next').on('click', function() {
  var page = parseInt($('#current-page').text());
  var totalPage = Math.ceil(data.length / PAGE_SIZE);

  if (page < totalPage) {
    page += 1;
    $('#current-page').text(page);
    renderList(data, page);
  }
});

Di atas ialah tutorial mudah untuk melaksanakan senarai produk melalui jquery. Melalui artikel ini, saya percaya anda sudah boleh menguasai kaedah melaksanakan senarai produk dengan jquery. Semoga artikel ini bermanfaat kepada semua.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai produk dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!