对于分类来说，一般包括一级分类，二级分类，三级分类，一般2级分类是比较好做的，大部分网站都是左边点击二级分类，右边显示相对应商品，这就要用到jquery技术了。下面就来为大家详细分析一下该如何实现吧。
首先把二级分类给全部遍历出来，Html代码如下：
<volist name='cate' id='vo'>
<li <if condition="$Think.get.name eq $vo['name']">class="active"</if> onclick="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=='套餐'){
str+='<dt class="col-sm-5 col-xs-5" style="text-align: center;margin-bottom:25px;margin-top:25px">';
str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';
str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';
str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"><div style="height:50px; overflow:hidden;"><h4 style="height: 30px; line-height: 10px; color:#000; ">'+obj.gname+'</h4></div><p style=" font-size:18px;"> .... </p><br/> <p class="money" style="margin-top:0px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';
}else{
str+='<dt class="col-sm-5 col-xs-5" style="text-align: center;margin-bottom:8px;margin-top:8px">';
str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';
str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';
str+='<span>'+obj.norms+'/'+obj.unity+'</span></a></dt>';
str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"> <h4 style="height: 30px; line-height: 15px; color:#000; ">'+obj.gname+'</h4> <p class="money" style="margin-top:30px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';
}
if (obj.quota!='0') {
str+=' <span style="border: 1px solid #c63731; padding:2px; color:#c63731;border-radius: 8px; font-size: 10px;">'
str+='限购'+obj.quota+ obj.unity;
str+='</span>';
}
if (obj.repertor==0) {
if(test=='套餐'){
str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:-15px;right:0px;">';
str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive" width="30" /></em>';
}else{
str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:5px;right:0px;">';
str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive" width="30" /></em>';
}
}else{
str+='<em>补货中</em>'
}
str+=' </dd></dl>';
})
$('.good_list').append(str);
$('.good_list').html(str).ready(function(){
$(".addcar").click(function(){
// debugger;
var uid = $('#uid').val();
var gid = $(this).attr('title');
// var cnum = $(this).parent().find("input[class*=num_val]").val();
// alert(uid);
var cnum=$(this).attr('att');
if (uid=='') {
alert('请先登陆');
location="{:U('Mobile/login')}";
return false;
}
$.ajax({
url:"{:U('Mobile/goods_info')}",
data:{gid:gid},
dataType:"json",
type:"post",
success:function(data){
// alert(data);
// alert(data.thumb);
// $(".img").src('/Public/Admin/kindeditor-4.1.10/attached/image'+data.thumb);
var thumb=data.thumb;
var tep='/Public/Admin/kindeditor-4.1.10/attached/image'+thumb;
$("#shopping_img").attr('src', src=tep) ;
$('.mo_shopping_quota').text(data.quota);
$('.mo_shopping_gid').text(data.gid);
$(".title").text(data.gname);
$(".shopping_gui").text(data.norms+'/'+data.unity);
$('.shopping_money').text(data.price);
$('.shelflife').text(data.shelflife);
$('.mo_shopping_gid').text(data.gid);
$('.mo_shopping_addnum').text(data.addnum);
$(".mo_shopping").css("display","block");
$('.num').val(data.addnum);
}
})
})
});
}
},
})}
Php查询并输出，代码如下：
public function goods1(){
$goodscateid=I('goodscateid');
$cate_id=I('cate_id');
$where['brandid']=array('exp',"regexp '(,|^)" .'$cate_id'."(,|$)'");
// $where['bid']=$goodscateid;
// $info=M("brandlist")->where("bid=$goodscateid")->find();
$info=M("brandlist")->where($where)->select();
foreach ($info as $key => $value) {
$bname=$value['bname'];
$shops[] = M('goodsinfo')->where("brandlist='$bname'")->order("gid desc")->find();
}
foreach ($shops as $key => $value) {
$pic=explode(",",substr($value['thumb'],1,strlen($value['thumb'])));
$shops[$key]['thumb']=$pic[0];
}
if ($shops) {
$returnValue['status']=1;
$returnValue['shops']=$shops;
}else{
$returnValue['status']=2;
}
$this->ajaxReturn($returnValue);}
好了，现在大家已经知道该怎么做了吧，那么如果还存在有疑问的，可以留言咨询，我们可以共同讨论，一起学习进步。
本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明原文作者及出处!