jQuery分类信息筛选过滤代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery分类信息筛选过滤代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery分类信息筛选过滤代码 </title>
<script type="text/javascript" src="js/jquery-1.8.8.js"></script>
<style type="text/css">
*{padding:0;margin: 0; }
ul{list-style: none;padding: 0;}
body{font-family: 'Microsoft Yahei';font-size: 14px;}
.title_select{width: 960px;height:auto;line-height: 32px;text-align: center;margin: 10px auto;
border-bottom: 1px #666 dashed;padding-bottom: 15px; }
.title_select ul li{float: left;color:#333;width:auto;height:32px;line-height: 32px; padding: 0 10px;margin: 10px 20px;}
.title_select ul li span.icon{width: 15px;height:15px;background: none;cursor: pointer;margin-right: 3px;border:1px solid #f1f1f1;display: inline-block;position:relative;top:4px;    }
.title_select ul li span.icon_select{background:#27E00E; }
.show_title_select{width: 960px;height:auto; margin: 50px auto 0 auto;}
.show_title_select h3{font-size:16px;font-weight: normal;margin: 10px auto 25px auto;border-bottom: 1px #666 dashed;padding-bottom: 10px; }
.show_title_select ul li{width:auto;height:32px;line-height: 32px;background:rgb(65, 148, 224);color:#fff; float: left;padding: 0 10px; margin: 10px 20px;border-radius: 5px;  }
.clear{clear: both;}
</style>

</head>
<body>

	<div class="title_select">
	   <h3>选择列表</h3>
		<ul>
			<li><span class="icon icon_no_select"></span><span>选择项0</span></li>
			<li><span class="icon icon_no_select"></span><span>选择项1</span></li>
			<li><span class="icon icon_no_select"></span><span>选择项2</span></li>
			<li><span class="icon icon_no_select"></span><span>选择项3</span></li>
			<li><span class="icon icon_no_select"></span><span>选择项4</span></li>
			<li><span class="icon icon_no_select"></span><span>选择项5</span></li>
			<li><span class="icon icon_no_select"></span><span>秋风落叶</span></li>
			<div class="clear"></div>
		</ul>
	</div>
	
	<div class="show_title_select">
	<h3>筛选后的信息</h3>
		<ul class="content_youselect"></ul>
		<div class="clear"></div>
	</div>
	
<script type="text/javascript">
/*
*适用用于不同类信息的筛选
*/
//============by=>enjurokcc================//
function add_class_num(obj,classname,newcalssname){//单元素class类切换
   $(obj).click(function(){
            if(!$(this).hasClass(newcalssname)){
            $(this).removeClass(classname).addClass(newcalssname);
          }else{
            $(this).removeClass(newcalssname).addClass(classname);
          }
    });  
}
function unique(arr) {//经典hash表去除数组重复项
        var result = [], hash = {};
        for (var i = 0, elem; (elem = arr[i]) != null; i++) {
            if (!hash[elem]) {
                result.push(elem);
                hash[elem] = true;
            }
        }
        return result;
         }        
function ayyay_select(obj,classname){
            array=[];//定义全局,保持外部调用最新数组
		    $('span.icon').each(function(){
		      if($(this).hasClass('icon_select')){
	          array.push($(this).next('span').html());//span标签不可更改你看不惯可以自行更改
		      }
		    })
		    return array = unique(array);
	    }
	    function obj_click(obj,content_obj){//obj=>您要点击部分的class名,content_obj=>你要把帅选信息放置的地方
          $(obj).click(function(){
		     ayyay_select();
		     //alert(array.length);
		     if(array.length !=0){
		         $(content_obj).empty();//首先清空内容区域所有元素
			     for(var i=0;i<array.length;i++){//再次导入最新数组
		          $(content_obj).append('<li>'+array[i]+'</li>');
		          }
		     }else{
		           $(content_obj).empty();//如果数组长度为0则内容清空
		          }
		   })
	    }         

 //执行函数
 $(function(){
    add_class_num('span.icon','icon_no_select','icon_select');
    obj_click('span.icon','ul.content_youselect');
    })
	</script>
	<p style="text-align:center;margin:150px auto;">此筛选方法只适用用于不同信息之间的筛选，同类信息将过滤，望大家使用时注意一下，不同类的后续会再写.</p>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)