js 带标志的方法实现点击2个按钮联查效果 ajax分页

如图所示：点击大类显示某个大类的多有图片，每页显示N个，分页，点击小类，在大类的基础上查找该大类下的某小类的图片分页，静态html代码如下：

 <ul class="c_c_l_bg_m_ul f_gray6">
            <li><span class="c_c_l_s3"><a href="#">苹果IOS</a></span></li>
            <li class="c_c_l_on"><span class="c_c_l_s4"><a href="#">安卓 Android</a></span></li>
            <li><span class="c_c_l_s3"><a href="#">微软windows </a></span></li>
</ul>



<ul class="c_c_l_bg_m_ul2 f_gray4">
            <li class="c_c_l_on2"><a href="#">策略游戏 ></a></li>
            <li><a href="#">模拟游戏 ></a></li>
            <li><a href="#">角色扮演 ></a></li>
            <li><a href="#">赛车游戏 ></a></li>
            <li><a href="#">智力游戏 ></a></li>
            <li><a href="#">音乐游戏 ></a></li>
            <li><a href="#">动作游戏 ></a></li>
</ul>
查询结果显示：
 <ul class="c_c_r_img_ul">
            <li><a href="#"><img src="images/c_c_r_img.jpg" /></a></li>

          </ul>
分页显示
          <ul class="c_c_r_page_ul">
              <li><a href="#"><img src="images/c_c_r_page_on.png"></a></li>
            <li><a href="#"><img src="images/c_c_r_page.png"></a></li>
            <li><a href="#"><img src="images/c_c_r_page.png"></a></li>
            <li><a href="#"><img src="images/c_c_r_page.png"></a></li>
            <li><a href="#"><img src="images/c_c_r_page.png"></a></li>
          </ul>
查询用ajax实现：
<script type="text/javascript">
//定义两个全局变量 czxt yxlx 
var czxt=2; 
var yxlx='';
function f_game_list(id,name){
//方法中id用作标志，判断是哪个点击，name是传的参数
if(id==1){//id为1的话参数传递的是czxt 点击大类所传递的值
czxt=name;
}
if(id==2){//id为2的话参数传递的是yxlx 点击小类所传递的值
yxlx=name;
}
//默认页码为1；
url = "http://www.q5.com/e/web/ajax.php?ac=yxlb_list_game&gamefj="+czxt+"&gametype="+yxlx+"&page=1";
$.ajax({
  type: "GET",
  url: url,
  //cache: true,
  dataType: "JSON",
  success: function(html){
   $(".c_c_r_img_ul").html(html['list']);
   $(".c_c_r_page_ul").html(html['page']);
//如果点击的是大类则清空小类内容
   if(id==1){  
     yxlx='';
   }
  }
});
}
//点击大类 css样式替换 同时清空小类的css
  $(function() {

        $("li[name^=czxt]").live('click',function() { 
            $("li[name^=czxt]").each(function() {
                var listyle = '#'+this.id;
                 var spanstyle = '#s'+this.id;
                
                $(listyle).attr("class",'');
                  $(spanstyle).attr("class",'c_c_l_s3');
            })
           
            var lihow = '#'+this.id;
             var spanhow = '#s'+this.id;
            $(lihow).attr("class",'c_c_l_on');
             $(spanhow).attr("class",'c_c_l_s4');

            $("li[name^=yxlx]").attr("class",'');
             yxlx='';

        })
    })

//点击小类 css样式替换
     $(function() {
        $("li[name^=yxlx]").live('click',function() {
            $("li[name^=yxlx]").each(function() {
                var listyle = '#'+this.id;    
                $(listyle).attr("class",'');      
            })
           
            var lihow = '#'+this.id;    
            $(lihow).attr("class",'c_c_l_on2');
        
            

        })
    })
</script>

ajax.php中代码：
if($ac == 'yxlb_list_game'){
    $softfj =  $_GET['gamefj'];//大类中传递的值
    $gametype =  $_GET['gametype'];//小类中传递的值 
    if($gametype){//因为该值可能为空 故如此写法
    $where ="and gametype = '$gametype'";
    }else{
    $where='';
    }
    $page = (!empty($_GET['page']))?$_GET['page']:1;
    if($softfj == 1){
        $softfj = 'IOS';
    }elseif($softfj == 2){
        $softfj = '安卓';
    }else{
        $softfj = 'WIN';
    }

    
    $totalnum = $empire->gettotal("SELECT count(*) as total FROM `phome_ecms_download` WHERE `gamefj` = '$softfj' $where");
    $pagename=ceil($totalnum/24);//总页数
    $start=($page-1)*24;//每页开始条数
    $sql = $empire->query("SELECT * FROM `phome_ecms_download` WHERE `gamefj` = '$softfj' $where limit $start,24");
    $data['list']='';
    $data['page']='';
    while($mr=$empire->fetch($sql)){
        $data['list'].='<li><a target="_blank" href="http://www.q5.com/e/action/ShowInfo.php?classid='.$mr[classid].'&id='.$mr[id].'" title="'.$mr[title].'-'.$mr[gamefj].'"><img src="http://www.q5.com'.$mr[titlepic].'" alt="'.$mr[title].'-'.$mr[gamefj].'" /></a></li>';               
    }
    
    for($i=1;$i<=$pagename;$i++){
        
    if($page==$i){
    $data['page'].='<li><a href="#" name='.$i.'><img src="http://i01.q5.com/skin/q5www20121029/images/c_c_r_page_on.png"></a></li>';
    }else{
    $data['page'].='<li><a href="#" name='.$i.'><img src="http://i01.q5.com/skin/q5www20121029/images/c_c_r_page.png"></a></li>';
    }
    
    }
    echo json_encode($data);
    
}

页面中
 <ul class="c_c_l_bg_m_ul f_gray6">
            <li id="li_1" name="czxt1"><span class="c_c_l_s3" id="sli_1"><a href="#" onclick="f_game_list(1,1);return false;" >苹果IOS</a></span></li>
            <li class="c_c_l_on" id="li_2" name="czxt2"><span class="c_c_l_s4" id="sli_2"><a href="#" onclick="f_game_list(1,2);return false;">安卓 Android</a></span></li>
            <li id="li_3" name="czxt3" ><span class="c_c_l_s3" id="sli_3" ><a href="#" onclick="f_game_list(1,3);return false;">微软windows </a></span></li>
          </ul>


 <ul class="c_c_l_bg_m_ul2 f_gray4">
            <li name="yxlx1" id="yxli_1"><a href="#" onclick="f_game_list(2,'策略游戏');return false;" >策略游戏 ></a></li>
            <li name="yxlx2" id="yxli_2"><a href="#" onclick="f_game_list(2,'模拟游戏');return false;" >模拟游戏 ></a></li>
            <li name="yxlx3" id="yxli_3"><a href="#" onclick="f_game_list(2,'角色扮演');return false;" >角色扮演 ></a></li>
            <li name="yxlx4" id="yxli_4"><a href="#" onclick="f_game_list(2,'赛车游戏');return false;" >赛车游戏 ></a></li>
            <li name="yxlx5" id="yxli_5"><a href="#" onclick="f_game_list(2,'智力游戏');return false;" >智力游戏 ></a></li>
            <li name="yxlx6" id="yxli_6"><a href="#" onclick="f_game_list(2,'音乐游戏');return false;">音乐游戏 ></a></li>
            <li name="yxlx7" id="yxli_7"><a href="#" onclick="f_game_list(2,'动作游戏');return false;">动作游戏 ></a></li>
          </ul>


     <ul class="c_c_r_img_ul" >
          <script>
<!--默认显示的信息-->
              $(function() {
               
                    var url = "http://www.q5.com/e/web/ajax.php?ac=yxlb_list_game&gamefj="+czxt+"&gametype="+yxlx+"&page=1";
                   
                    $.ajax({
                           type: "GET",
                           url: url,
                          
                           dataType: "JSON",
                           success: function(html){
                            $(".c_c_r_img_ul").html(html['list']);
                            $(".c_c_r_page_ul").html(html['page']);
                            
                             }
                    });
                   
               
            })
            </script>
          </ul>
          
          <ul class="c_c_r_page_ul">
         
          <script>
               <!--分页效果-->
              $(function() {              
                  $(".c_c_r_page_ul a").live('click',function() {
                   var page =$(this).attr('name');
                    var url = "http://www.q5.com/e/web/ajax.php?ac=yxlb_list_game&gamefj="+czxt+"&gametype="+yxlx+"&page="+page;
                    //alert(gameurl);
                    $.ajax({
                           type: "GET",
                           url: url,
                            //cache: true,
                           dataType: "JSON",
                           success: function(html){
                           $(".c_c_r_img_ul").html(html['list']);
                            $(".c_c_r_page_ul").html(html['page']);
                             }
                    });
                   
                   
               
            })
            })
            </script>
            
          </ul>