() index absolut query isp 全部 shelf display deb

對於分類來說，一般包括一級分類，二級分類，三級分類，一般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開發公司燚軒科技整理發布，原創不易，如需轉載請註明原文作者及出處!

實操：商品列表三級分類的實現方法