jquery 产品列表

$(document).ready(function() {
    $.ajax({
        url: 'path/to/your/api', // 替换为你的 API 端点
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            var productList = $('#product-list'); // 假设你的产品列表容器 ID 是 'product-list'
            $.each(data, function(index, product) {
                var item = '<div class="product">' +
                            '<h3>' + product.name + '</h3>' +
                            '<p>' + product.description + '</p>' +
                            '<p>Price: $' + product.price + '</p>' +
                          '</div>';
                productList.append(item);
            });
        },
        error: function(xhr, status, error) {
            console.error('Error fetching product data:', error);
        }
    });
});

// 过滤
$('#filter-input').on('input', function() {
    var filterValue = $(this).val().toLowerCase();
    $('.product').each(function() {
        var productName = $(this).find('h3').text().toLowerCase();
        if (productName.indexOf(filterValue) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

// 排序
$('#sort-select').on('change', function() {
    var sortBy = $(this).val();
    var products = $('.product').get();
    products.sort(function(a, b) {
        var aVal = $(a).find('p:last').text().replace('$', '').trim();
        var bVal = $(b).find('p:last').text().replace('$', '').trim();
        return aVal.localeCompare(bVal);
    });
    $.each(products, function(index, product) {
        $('#product-list').append(product);
    });
});