您的位置:首页 > Web前端 > JavaScript

js实现用li进行筛选

2015-11-05 23:07 561 查看
<ul id="filter-school" class="am-avg-sm-2 filter-box">
<li>中国海洋大学</li>
<li>中国海洋大学</li>
<li>青岛大学</li>
<li>青岛科技大学</li>
<li>中国石油大学</li>
<li>山东大学</li>
</ul>
<ul id="filter-direction" class="am-avg-sm-2 filter-box">
<li>的</li>
<li>中国海洋大学</li>
<li>青岛大学</li>
<li>青岛科技大学</li>
<li>中国石油大学</li>
<li>山东大学</li>
</ul>
<button onclick="filterbtn()">123</button>
<script>
function clearselesch(){
$("#filter-school > li").each(function(){
$(this).removeClass("selected")
})
}
function clearseledir(){
$("#filter-direction > li").each(function(){
$(this).removeClass("selected")
})
}
window.onload = function(){
var lis1 = document.getElementById('filter-school').getElementsByTagName("li");
for (var i = 0; i < lis1.length; i++) {
lis1[i].a = i;
lis1[i].onclick = function(){
schoolvalue = this.a;
console.log(schoolvalue)
}
};
var lis2 = document.getElementById('filter-direction').getElementsByTagName("li");
for (var i = 0; i < lis2.length; i++) {
lis2[i].a = i;
lis2[i].onclick = function(){
directionvalue = this.a;
console.log(directionvalue)
}
};
}
$("#filter-school > li").click(function(){
clearselesch();
$(this).addClass("selected");
})
$("#filter-direction > li").click(function(){
clearseledir();
$(this).addClass("selected");
})
function filterbtn(){
url = schoolvalue + "/" + directionvalue;
console.log(url)
}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript 筛选