实操：商品列表三级分类的实现方法

最新推荐文章于 2023-06-25 18:51:24 发布

燚轩科技

最新推荐文章于 2023-06-25 18:51:24 发布

阅读量6.8k

点赞数

分类专栏：原创技术分享文章标签：三级分类商品列表

本文链接：https://blog.csdn.net/qq_41760133/article/details/81458896

版权

本文介绍如何利用jQuery技术实现商品列表的三级分类。通过遍历二级分类，添加点击事件，动态加载商品信息，详细讲解了从HTML结构、jQuery代码到PHP查询的实现过程。

摘要由CSDN通过智能技术生成

　　对于分类来说，一般包括一级分类，二级分类，三级分类，一般2级分类是比较好做的，大部分网站都是左边点击二级分类，右边显示相对应商品，这就要用到jquery技术了。下面就来为大家详细分析一下该如何实现吧。

　　首先把二级分类给全部遍历出来，Html代码如下：

<volist name='cate' id='vo'>
<li <if condition="$Think.get.name eq $vo['name']">class="active"</if> οnclick="funbrand('{$vo.name}','{$vo.id}')" ">
<span style="font-weight: 600;font-size: 13px;height: 45px; display: flex;justify-content: center;align-items: center;padding: 0;border-right: 5px solid white;" data="{$vo.id}" name="cateid" title="">{$vo.name}</span>
</li>
</volist>

根据需求添加点击事件，写jquery：
jquery代码如下:
function funbrand(id,obj){
debugger;
$(obj).addClass('active');

$(obj).siblings('a').removeClass('active');
cateid=$("span[name='cateid']").attr('data');

$('.all').removeClass('active');
var test=$('.all').attr('title');
var goodscateid = id;
cate_id=$("input[name='cateid1']").val();
$('#id').val(goodscateid);
var types = $('#type').val();
$.ajax({
url:"{:U('Mobile/goods1')}",
data:{goodscateid:goodscateid,types:types,cate_id:cate_id},
dataType:"json",
type:"post",
success:function(data){
alert(data.v);
str = '';
$('.good_list').empty();
if (data.status==1) {

$.each(data.shops,function(index,obj){

str+='<dl class="clearfix">';

if(test=='套餐'){