一般电商SKU选中效果+ajax分页实现

最新推荐文章于 2024-06-15 23:37:43 发布

原创最新推荐文章于 2024-06-15 23:37:43 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

8 篇文章

订阅专栏

效果展示：

未选中

被选中

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery实现多条件筛选</title>
<meta name="keywords" content="jquery,筛选" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="js/jquery.js"></script>

<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- <script type="text/javascript" src="js/script.js"></script> -->
</head>
<body> 
<div id="main">
	<div class="demo">
	<ul class="select">
		<li class="select-list">
			<dl id="select1">
				<dt>上装：</dt>
				<dd class="select-all selected"><a href="#">全部</a></dd>
				<dd><a href="#">针织衫</a></dd>
				<dd><a href="#">毛呢外套</a></dd>
				<dd><a href="#">T恤</a></dd>
				<dd><a href="#">羽绒服</a></dd>
				<dd><a href="#">棉衣</a></dd>
				<dd><a href="#">卫衣</a></dd>
				<dd><a href="#">风衣</a></dd>
			</dl>
		</li>
		<li class="select-list">
			<dl id="select2">
				<dt>裤装：</dt>
				<dd class="select-all selected"><a href="#">全部</a></dd>
				<dd><a href="#">牛仔裤</a></dd>
				<dd><a href="#">小脚/铅笔裤</a></dd>
				<dd><a href="#">休闲裤</a></dd>
				<dd><a href="#">打底裤</a></dd>
				<dd><a href="#">哈伦裤</a></dd>
			</dl>
		</li>
		<li class="select-list">
			<dl id="select3">
				<dt>裙装：</dt>
				<dd class="select-all selected"><a href="#">全部</a></dd>
				<dd><a href="#">连衣裙</a></dd>
				<dd><a href="#">半身裙</a></dd>
				<dd><a href="#">长袖连衣裙</a></dd>
				<dd><a href="#">中长款连衣裙</a></dd>
			</dl>
		</li>
		<li class="select-result">
			<dl>
				<dt>已选条件：</dt>
				<dd class="select-no">暂时没有选择过滤条件</dd>
			</dl>
		</li>
	</ul>
	</div>
	<div class="contents"></div>   

        <div class="pagination"></div>
</div>
</body>
<script>
var s1='';
var s2='';
var s3='';
$(function(){			
	$("#select1 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectA").remove();
                        s1='';
		} else {
			var copyThisA = $(this).clone();
			if ($("#selectA").length > 0) {
				$("#selectA a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisA.attr("id", "selectA"));
			}
                        s1=$(this).text();
                        
		}
                get_list(1);
               
	});
	
	$("#select2 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectB").remove();
                        s2='';
		} else {
			var copyThisB = $(this).clone();
			if ($("#selectB").length > 0) {
				$("#selectB a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisB.attr("id", "selectB"));
			}
                        s2=$(this).text();
		}
                get_list(1);
               
	});
	$("#select3 dd").click(function () {
		$(this).addClass("selected").siblings().removeClass("selected");
		if ($(this).hasClass("select-all")) {
			$("#selectC").remove();
                        s3='';
		} else {
			var copyThisC = $(this).clone();
			if ($("#selectC").length > 0) {
				$("#selectC a").html($(this).text());
			} else {
				$(".select-result dl").append(copyThisC.attr("id", "selectC"));
			}
                      s3=$(this).text();
		}
              get_list(1);
	});
	$("#selectA").live("click", function () {
		$(this).remove();
		$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
                s1='';
                get_list(1);
	});
	$("#selectB").live("click", function () {
		$(this).remove();
		$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
               s2='';
               get_list(1);
	});
	
	$("#selectC").live("click", function () {
		$(this).remove();
		$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
                s3='';
                get_list(1);
	});
	$(".select dd").live("click", function () {
		if ($(".select-result dd").length > 1) {
			$(".select-no").hide();
		} else {
			$(".select-no").show();
		}
	});     
	
});
var get_list=function (p){
    $('.contents').html('<img src="load.gif" id="loading">');
            $.post('list.php',{a:s1,b:s2,c:s3,page:p},function (list){
                       $("#loading").remove();
                       console.log(list);
                       var list_str='';
                       $.each(list.list,function (i,v){
                           list_str+='<li><a href="">'+v.title+"</li>";
                       });
                        $('.contents').html("<ul>"+list_str+"</ul>");
                        pagetotal=Math.ceil(list.total/list.pagesize);
                        var pagination='';
                        for(var i=1;i<=pagetotal;i++){
                            pagination+='<a onclick="get_list('+i+')" href="javascript:void(0)">'+i+'</a>  ';
                        }
                        $(".pagination").html(pagination);
            },'json',true);    
        }
</script>
</html>

php处理页面

<?php
$page=isset($_POST['page'])?intval($_POST['page']):1;
// print_r($_POST);exit;
$a=$_POST['a'];
$b=$_POST['b'];
$c=$_POST['c'];
$pagesize='10';
// print_r($_POST);exit;

$sql="select title,id from article where title like '%%' AND description like '%%' AND contents like '%%'";
$total='200';
if($page==1){

$list=[['title'=>'标题','id'=>1],['title'=>'标题','id'=>2],['title'=>'标题','id'=>3],['title'=>'标题','id'=>4],['title'=>'标题','id'=>5],['title'=>'标题','id'=>6],['title'=>'标题','id'=>7],['title'=>'标题','id'=>9],['title'=>'标题','id'=>8]];
}elseif($page=2){
    $list=[['title'=>'标题3','id'=>1],['title'=>'标题333','id'=>2],['title'=>'标题222','id'=>3],['title'=>'标题','id'=>4],['title'=>'标题333','id'=>5],['title'=>'标题','id'=>6],['title'=>'标题','id'=>7],['title'=>'标题','id'=>9],['title'=>'标题','id'=>8]];
    
}elseif($page=3){
    $list=[['title'=>'标题33333','id'=>1],['title'=>'标题333555','id'=>2],['title'=>'标题222','id'=>3],['title'=>'标题55555','id'=>4],['title'=>'标题333','id'=>5],['title'=>'标题','id'=>6],['title'=>'标题','id'=>7],['title'=>'标题','id'=>9],['title'=>'标题','id'=>8]];
    
}
$data=['page'=>$page,'a'=>$a,'b'=>$b,'c'=>$c,'pagesize'=>$pagesize,'list'=>$list,'total'=>$total];
exit(json_encode($data));