您的位置：首页 > Web前端 > JQuery

Jquery选择器练习产品筛选

2013-12-16 21:55 429 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Jquery选择器练习产品筛选</title>
<style>
ul{
width: 500px;
height: 200px;
border: 1px solid #ccc;
}
ul li{
width: 100px;
margin: 10px;
border:1px solid #ccc;
text-align: center;
float: left;
list-style:none;

}
.contains{
color: red;
}
.show{
width: 500px;
height: 50px;
}
.show span{
margin-left:200px;
background-color: #ccc;
padding: 5px;
}

</style>
<script src="jquery-1.10.2.min.js" type="text/javascript">
</script>
<script>
$(document).ready(
function(){
var $btn=$(".show span");
var $categroy=$("ul li:gt(5):not(:last)");/*:gt(5)获取索引值大于5的元素而且不是最后一个元素*/
$categroy.hide();
$btn.click(function(){
if($categroy.is(":visible")){ /*如果categroy的值为显示时*/
$categroy.hide();
$("ul li").removeClass("contains");
$btn.text("显示所有产品");

}
else{
$categroy.show();
$("ul li").filter(":contains('佳能'),:contains('索尼')").addClass("contains"); /*filter(":内容")筛选索引中包含内容值相等的元素*/
$btn.text("精选产品");/*修改btn的文本内容*/
return false;  /*超链接不跳转*/
}
});
});

</script>
</head>
<body>
<ul>
<li>佳能</li>
<li>索尼</li>
<li>尼康</li>
<li>富士</li>
<li>爱国者</li>
<li>松下</li>
<li>柯达</li>
<li>三星</li>
<li>宾得</li>
<li>柯达</li>
<li>三星</li>
<li>宾得</li>

<li>其他品牌</li>

</ul>
<div class="show">
<span>显示全部品牌</span>
</div>

</body>
</html>

效果

Jquery选择器练习产品筛选

//
// ]]>
// $(document).ready(
function(){
var $btn=$(".show span");
var $categroy=$(".ul li:gt(5):not(:last)");/*:gt(5)获取索引值大于5的元素而且不是最后一个元素*/
$categroy.hide();
$btn.click(function(){
if($categroy.is(":visible")){ /*如果categroy的值为显示时*/
$categroy.hide();
$("ul li").removeClass("contains");
$btn.text("显示所有产品");

}
else{
$categroy.show();
$(".ul li").filter(":contains('佳能'),:contains('索尼')").addClass("contains"); /*filter(":内容")筛选索引中包含内容值相等的元素*/
$btn.text("精选产品");/*修改btn的文本内容*/
return false; /*超链接不跳转*/
}
});
});
// ]]>

佳能

索尼

尼康

富士

爱国者

松下

柯达

三星

宾得

柯达

三星

宾得

其他品牌

显示全部品牌

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航