日期:2014-05-17 浏览次数:20775 次
<!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>
<title>模拟多条件筛选</title>
<meta property="qc:admins" content="15412670101010167277" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
//选中filter下的所有a标签,为其添加hover方法,该方法有两个参数,分别是鼠标移上和移开所执行的函数。
$("#filter a").hover(function() {
$(this).addClass("seling");
}, function() {
$(this).removeClass("seling");
});
//选中filter下所有的dt标签,并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
$("#filter dt+dd a").attr("class", "seled");
/*注意:这儿应该是设置(attr)样式,而不是添加样式(addClass),
不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/
//为filter下的所有a标签添加单击事件
$("#filter a").click(function() {
$(this).parents("dl").children("dd").each(function() {
//下面三种方式效果相同(第三种写法的内部就是调用了find()函数,所以,第二、三种方法是等价的。)
//$(this).children("div").children("a").removeClass("seled");
//$(this).find("a").removeClass("seled");
$('a', this).removeClass("seled");
});
$(this).attr("class", "seled");
alert(RetSelecteds()); //返回选中结果
});
//alert(RetSelecteds()); //返回选中结果
});
function RetSelecteds() {
var result = "";
$("#filter a[class='seled']").each(function() {
//result += $(this).attr("id") + "\n";//获取标签的ID值
result += $(this).html() + "\n";//获取标签内的数据
});
return result;
}
</script>
<style type="text/css">
#filter {
width: 620px;
height: auto;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
#filter dl {
padding: 0;
margin-top: 0;
margin-bottom: 0;
clear: both;
padding: 4px 0;
}
#filter dt,dd {
display: block;
float: left;
width: auto;
padding: 0;
margin: 3px 0;
}
#filter dt {
height: 14px;
padding-bottom: 4px;
font-weight: bold;
color: #333333;
}
#filter dd {
color: #005AA0;
margin-right: 8px;
}
#filter a {
cursor: pointer;
}
.seling {
background-color: #005AA0;
color: #FFFFFF;
}
.seled {
background-color: #005AA0;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="filter">
<dl>
<dt>品牌:</dt>
<dd>
<div>