最近在项目尾期时根据客户需求紧急添加一个功能（自选），现简单记录。后期整理说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自选</title>
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery.1.9.1.min.js"></script>
<style>
.container{width: 800px;margin: 0 auto;overflow: hidden;}
.nav .nav-list{float: left;width: 120px;height:50px;line-height: 50px;text-align: center;font-size: 16px;color:#666;margin-right: 10px;cursor: pointer;}
.nav .nav-list:hover{background: #2f9cd7;color:#fff;}
.nav .nav-active{background: #2f9cd7;color:#fff;}
.nav:after{display: block;content: "";clear: both;}
.disnone{display: none;}
.table-list tr{line-height: 40px;height: 40px}
.table-list td{text-align: center;font-size: 16px;color:#666;border-bottom: 1px dashed #666;}
.table-list th{text-align: center;font-size: 16px;color:#666;border-bottom: 1px dashed #666;}
.star-bg{display: inline-block;width: 22px;height: 22px;background: url("images/star-gray.png") center no-repeat;cursor: pointer;}
.star-active{background: url("images/star-blue.png") center no-repeat;}
/*自选项星为蓝色*/
.self-chance .star-bg{background: url("images/star-blue.png") center no-repeat;}
</style>
</head>
<body>
<div class="container" >
<!--导航列表-->
<div class="nav">
<span class="nav-list nav-spe" >自选</span>
<span class="nav-list nav-active">分类一</span>
<span class="nav-list">分类二</span>
</div>
<!--导航对应展示项-->
<div class="tab-box">
<table cellpadding="0" cellspacing="0" class="table-list self-chance disnone">
<colgroup>
<col width="15%">
<col width="20%">
<col width="35%">
<col width="30%">
</colgroup>
<thead>
<tr>
<th> </th>
<th>选中商品</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody class="self-item self-warp">
<!--获取所有分类列表内容存放此处-->
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="table-list goods ">
<colgroup>
<col width="15%">
<col width="20%">
<col width="35%">
<col width="30%">
</colgroup>
<thead>
<tr>
<th> </th>
<th>商品类一</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody class="self-item">
<tr id="list1">
<td><i class="star-bg"></i></td>
<td>电脑1</td>
<td>11111</td>
<td>购买</td>
</tr>
<tr id="list2">
<td><i class="star-bg"></i></td>
<td>电脑2</td>
<td>22222</td>
<td>购买</td>
</tr>
<tr id="list3">
<td><i class="star-bg"></i></td>
<td>电脑3</td>
<td>33333</td>
<td>购买</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="table-list goods disnone">
<colgroup>
<col width="15%">
<col width="20%">
<col width="35%">
<col width="30%">
</colgroup>
<thead>
<tr>
<th> </th>
<th>商品类二</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody class="self-item">
<tr id="list4">
<td><i class="star-bg"></i></td>
<td>手机1</td>
<td>11</td>
<td>购买</td>
</tr>
<tr id="list5">
<td><i class="star-bg"></i></td>
<td>手机2</td>
<td>22</td>
<td>购买</td>
</tr>
<tr id="list6">
<td><i class="star-bg"></i></td>
<td>手机3</td>
<td>33</td>
<td>购买</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(function(){
//初始加载获取分类一，二中所有商品克隆一份放入自选对应表中
var AllList=$(".goods tbody tr").clone();
$(".self-warp").append(AllList);
// 获取cookie用于初始加载页面时商品列表点亮项
var ago=getCookie("catename");
var cookList=ago;
// 根据cookie值初始点亮对应项
$(".goods .self-item tr").each(function(){
var cate = cookList;
var strs = new Array();
if (cate != "") {
strs = cate.split(",");
}
//对数组调用去除空白数据的方法
strsL = strs.notempty();
for(var i=0;i<strsL.length;i++){
// $.trim去掉id的前后空格以防万一
if(strsL[i]==$.trim($(this).attr("id"))){
$(this).find("i").addClass("star-active")
}
}
});
// 商品分类的切换
$(".nav").on("click",".nav-list",function () {
var _Range=$(this).index();
if(!$(this).hasClass("nav-active")){
$(this).addClass("nav-active").siblings().removeClass("nav-active");
}
$(".tab-box table").eq(_Range).show().siblings().hide();
})
// 点击对应商品列表项前导星颜色变换并存储cookie
$(".goods").on("click","tbody tr .star-bg",function () {
var trId=$(this).parent().parent().attr("id");
if(!$(this).hasClass("star-active")){
$(this).addClass("star-active")
cookList+=trId;
}else{
$(this).removeClass("star-active");
cookList=cookList.replace(trId,"") //星变灰就在字符串中移除对应的id
}
// 将cookie以逗号分隔存起来
cookList+=",";
setCookie("catename",cookList)
});
// 点击自选，根据cookie值显示对应项
$(".nav .nav-spe").click(function () {
//获取cookie
var cate=getCookie("catename");
// 定义一个空数组
var strs=new Array();
// 如果取回的cookie不为空
if(cate!=""){
// 将cookie以逗号断开放入数组
strs = cate.split(",");
// 将数组中的值为空的项去除
strsL=strs.notempty();
}
//对自选中所有tr的id与数组strsL进行比对
$(".self-warp tr").each(function(){
// 首先将所有项隐藏
$(this).hide();
// 对数组进行遍历，将数组中每一项与自选中的每一项tr的id对比，相同就让其显示
for(var i=0;i<strsL.length;i++){
if(strsL[i]==$(this).attr("id")){
$(this).show();
}
}
})
});
});
// 获取cookie
function getCookie(key){
var arr1 = document.cookie.split('; ');
for(var i=0;i<arr1.length;i++){
var arr2 = arr1[i].split('=');
if(arr2[0]==key){
return decodeURI(arr2[1]);
}
}
}
// 设置cookie
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
// 清除cookie
function removeCookie(key){
setCookie(key,'',-1);
}
//拓展-去除数组中空白数据方法
Array.prototype.notempty = function () {
for (var i = 0; i < this.length; i++) {
if (this[i] == "" || typeof (this[i]) == "undefined") {
this.splice(i, 1);
i--;
}
}
return this;
};
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
