对于分类来说，一般包括一级分类，二级分类，三级分类，一般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 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" >'; str+='<a href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">'; str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" class="img-responsive center-block"></em>'; str+='<dd class="col-sm-7 col-xs-7" ><div ><h4 >'+obj.gname+'</h4></div><p > .... </p><br/> <p class="money" ><i>￥</i>'+obj.price+'</p><br>'; }else{ str+='<dt class="col-sm-5 col-xs-5" >'; str+='<a href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">'; str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" class="img-responsive center-block"></em>'; str+='<span>'+obj.norms+'/'+obj.unity+'</span></a></dt>'; str+='<dd class="col-sm-7 col-xs-7" > <h4 >'+obj.gname+'</h4> <p class="money" ><i>￥</i>'+obj.price+'</p><br>'; } if (obj.quota!='0') { str+=' <span >' str+='限购'+obj.quota+ obj.unity; str+='</span>'; } if (obj.repertor==0) { if(test=='套餐'){ str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" >'; 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+'" >'; 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开发公司燚轩科技整理发布，原创不易，如需转载请注明原文作者及出处!