购物商城jQuery
时间: 2023-07-26 10:03:39 浏览: 48
购物商城通常需要前端技术来实现页面的交互效果,其中jQuery是一种常用的JavaScript库,可以方便地操作DOM元素、实现动态效果和交互功能等。以下是一个简单的示例代码,实现了商品列表的展示和筛选功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物商城</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
// 商品列表数据
var goodsList = [
{name: "商品1", price: 100, category: "分类1"},
{name: "商品2", price: 200, category: "分类2"},
{name: "商品3", price: 300, category: "分类1"},
{name: "商品4", price: 400, category: "分类2"},
{name: "商品5", price: 500, category: "分类3"},
];
// 展示商品列表
function showGoodsList(goodsList){
var $list = $('#goodsList');
$list.empty();
$.each(goodsList, function(index, item){
var $item = $('<li>').appendTo($list);
$('<span>').text(item.name).appendTo($item);
$('<span>').text(item.price).appendTo($item);
$('<span>').text(item.category).appendTo($item);
});
}
// 筛选商品列表
function filterGoodsList(category){
var filteredList = $.grep(goodsList, function(item, index){
return item.category === category;
});
showGoodsList(filteredList);
}
// 默认展示全部商品
showGoodsList(goodsList);
// 绑定分类筛选事件
$('#categorySelect').change(function(){
var selectedCategory = $(this).val();
if(selectedCategory === 'all'){
showGoodsList(goodsList);
}else{
filterGoodsList(selectedCategory);
}
});
});
</script>
</head>
<body>
<h1>购物商城</h1>
<select id="categorySelect">
<option value="all">全部分类</option>
<option value="分类1">分类1</option>
<option value="分类2">分类2</option>
<option value="分类3">分类3</option>
</select>
<ul id="goodsList">
</ul>
</body>
</html>
```
该示例代码使用jQuery实现了商品列表的展示和分类筛选功能,用户可以通过下拉列表选择分类,页面会实时展示符合条件的商品列表。当然,这只是一个简单的示例,实际的购物商城页面需要更多的功能和交互效果,需要根据具体需求进行开发。