在饿了么这样的在线订餐平台上,用户通常需要先选择店铺,然后才能浏览和选择商品。为了提升用户体验,实现店铺列表与商品列表的实时联动是一个很好的功能。下面,我将详细介绍如何使用jQuery来实现这一功能。
1. 前端页面布局
首先,我们需要一个基本的HTML结构来展示店铺列表和商品列表。以下是一个简单的示例:
<div id="store-list">
<select id="store-selector">
<option value="">请选择店铺</option>
<!-- 店铺选项将通过jQuery动态填充 -->
</select>
</div>
<div id="product-list">
<h2>商品列表</h2>
<ul>
<!-- 商品列表将通过jQuery动态填充 -->
</ul>
</div>
2. CSS样式
为了使页面更加美观,我们可以添加一些基本的CSS样式:
#store-list, #product-list {
margin-bottom: 20px;
}
#product-list ul {
list-style-type: none;
padding: 0;
}
3. jQuery脚本
接下来,我们使用jQuery来动态填充店铺和商品列表,并实现联动效果。
$(document).ready(function() {
// 假设这是从服务器获取的店铺数据
var stores = [
{ id: 1, name: '店铺A' },
{ id: 2, name: '店铺B' },
// ... 更多店铺
];
// 填充店铺列表
$('#store-selector').html(stores.map(function(store) {
return '<option value="' + store.id + '">' + store.name + '</option>';
}));
// 监听店铺选择器的变化
$('#store-selector').change(function() {
var storeId = $(this).val();
if (storeId) {
// 假设这是从服务器获取的商品数据
var products = [
{ id: 1, name: '商品1', storeId: 1 },
{ id: 2, name: '商品2', storeId: 1 },
{ id: 3, name: '商品3', storeId: 2 },
// ... 更多商品
];
// 过滤出当前店铺的商品
var filteredProducts = products.filter(function(product) {
return product.storeId === parseInt(storeId);
});
// 清空商品列表,并填充新的商品数据
$('#product-list ul').empty().html(filteredProducts.map(function(product) {
return '<li>' + product.name + '</li>';
}));
} else {
// 清空商品列表
$('#product-list ul').empty();
}
});
});
4. 总结
通过以上步骤,我们成功实现了饿了么订单查询中店铺列表与商品列表的实时联动。当用户选择不同的店铺时,商品列表会自动更新,展示该店铺的商品信息。这种联动效果可以大大提升用户体验,让用户更快地找到自己需要的商品。
