要实现Ajaxinate无限滚动时的产品快速查看功能,可以使用以下代码示例:
HTML代码:
JavaScript代码:
$(document).ready(function() {
// 初始化Ajaxinate无限滚动
$('#product-list').ajaxinate({
method: 'GET',
url: 'load-more-products.php', // 替换为实际的加载更多产品的URL
container: '#product-list',
pagination: '.pagination',
autoload: true
});
// 产品快速查看
$('#product-list').on('click', '.product', function() {
var productId = $(this).data('id'); // 获取产品ID
// 发起Ajax请求获取产品详情
$.ajax({
method: 'GET',
url: 'product-details.php', // 替换为实际的获取产品详情的URL
data: { id: productId },
success: function(response) {
$('#product-details').html(response); // 将产品详情插入到页面中
},
error: function() {
alert('无法加载产品详情');
}
});
});
});
在上述代码中,我们首先初始化了Ajaxinate无限滚动插件,然后为每个产品列表项添加了一个点击事件。在点击事件中,我们使用Ajax请求来获取产品详情,并将其插入到页面中的#product-details
元素中。
请注意,以上代码示例中的URL和选择器需要根据实际情况进行替换。