jquery筛选查询
html 主要需要筛选这两个蓝框的input; 注释代码写的很详细,有类似功能的朋友们可以参考一下,
大致思路是通过switch来决定某一侧的选中的条件是什么,再到另一侧循环并找到他的兄弟标签的value值来精确判断
需要的是哪一个div ,本人初次写这种功能,耗费了大半天的时间,终于是可以用了,希望可以帮助大家节省时间,不足之处
还请见谅 ,好在可以用......
此处是html
<div class="nav" id="nav">
<p class="set">套系</p>
<ul class="new box">
<li>全部</li>
<li>自然之心</li>
<li>极简年华</li>
<li>时光海</li>
<li>西雅图</li>
<li>翰墨拾香</li>
<li>爆款儿童房</li>
<li>科技儿童房</li>
</ul>
</div>
<div class="nav2" id="nav2">
<p class="set2">空间</p>
<ul class="new2 box">
<li>全部</li>
<li>客餐厅</li>
<li>主卧</li>
<li>儿童房</li>
<li>多功能房</li>
<li>书房</li>
<li>衣帽间</li>
<li>阳台</li>
<li>玄关</li>
</ul>
</div>
<div class="wy-Module " style="margin-left: 5px;">
<input class = "input2 " type="text"/>
<div class="wy-Module-con" >
<a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
<div id = "background1" style="text-align: center; ">
<img id = "bofang" src="upload/121.jpg" alt="点我播放" />
</div>
<input type="text" class = "danlisty" value = "翰墨拾香" > </input>
<input type="text" class = "danlisty2" value = "玄关" > </input>
<input class = "input3 " type="text"/>
</a>
<a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
<div id = "background1" style="text-align: center; ">
<img id = "bofang" src="upload/121.jpg" alt="点我播放" />
</div>
<input type="text" class = "danlisty" value = "自然之心" > </input>
<input type="text" class = "danlisty2" value = "玄关" > </input>
<input class = "input3 " type="text"/>
</a>
<a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
<div id = "background1" style="text-align: center; ">
<img id = "bofang" src="upload/121.jpg" alt="点我播放" />
</div>
<input type="text" class = "danlisty" value = "时光海" > </input>
<input type="text" class = "danlisty2" value = "客餐厅" > </input>
<input class = "input3 " type="text"/>
</a>
<a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
<div id = "background2" >
<img id = "bofang" src="upload/121.jpg" alt="点我播放" />
</div>
<input type="text" class = "danlisty" value = "自然之心" />
<input type="text" class = "danlisty2" value = "阳台" > </input>
<input class = "input3 " type="text"/>
</a>
<a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
<div id = "background2" >
<img id = "bofang" src="upload/121.jpg" alt="点我播放" />
</div>
<input type="text" class = "danlisty" value = "翰墨拾香" />
<input type="text" class = "danlisty2" value = "主卧" > </input>
<input class = "input3 " type="text"/>
</a>
<a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
<div id = "background2" >
<img id = "bofang" src="upload/121.jpg" alt="点我播放" />
</div>
<input type="text" class = "danlisty" value = "极简年华" />
<input type="text" class = "danlisty2" value = "客餐厅" > </input>
<input class = "input3 " type="text"/>
</a>
<a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
<div id = "background2" >
<img id = "bofang" src="upload/121.jpg" alt="点我播放" />
</div>
<input type="text" class = "danlisty" value = "极简年华" />
<input type="text" class = "danlisty2" value = "客餐厅" > </input>
<input class = "input3 " type="text"/>
</a>
</div>
<input class = "input3 " type="text"/>
</div>
</div>
------------------------------------------------下方为js---------------------------------------------------------
/*筛选1*/
//记录第一个p的文字
var p1;
$(".nav li").click(function(){
//得到点击的li的文本
var li=$(this).html();
//重新给p复制
$(".nav p").html(li);
//记录选中时p的内容
var pText = $(".nav p").html();
p1 = pText;
$(".new").hide();
$("p").removeClass("select") ;
//先判断 p2是否有内容
if(p2){
//不为空说明第二个筛选条件已存在
switch(p2)
{
case "全部":
//循环第一个input 的到文本
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断pText是否为全部
if(pText == '全部'){
//全部显示
$(this).parent().show();
}//用当前p的文本进行比较,如果相同说明是这个input
else if(pText == inputText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
})
break;
case "客餐厅":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为客餐厅
if(inputText == '客餐厅'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "主卧":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为主卧
if(inputText == '主卧'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "儿童房":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为儿童房
if(inputText == '儿童房'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "多功能房":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为多功能房
if(inputText == '多功能房'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "书房":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为书房
if(inputText == '书房'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "衣帽间":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为衣帽间衣帽间
if(inputText == '衣帽间'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "阳台":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为阳台
if(inputText == '阳台'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "玄关":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断右边的pText是否为玄关
if(inputText == '玄关'){
//得到它上一个子节点的value,也就是左边的input
var a = $(this).prev().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
default:
}
}else{
//循环第一个input 的到文本
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断pText是否为全部
if(pText == '全部'){
//全部显示
$(this).parent().show();
}//用当前p的文本进行比较,如果相同说明是这个input
else if(pText == inputText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
})
}
});
$(".set2").click(function(){
var _name = $(this).attr("name");
if( $("[name="+_name+"]").length > 1 ){
$("[name="+_name+"]").removeClass("select2");
$(this).addClass("select2");
} else {
if( $(this).hasClass("select2") ){
$(this).removeClass("select2");
} else {
$(this).addClass("select2");
}
}
});
/*筛选2*/
//记录第二个p的文字
var p2;
$(".nav2 li").click(function(){
//得到点击的li的文本
var li=$(this).html();
//重新给p赋值
$(".nav2 p").html(li);
//拿到p内容
var pText = $(".nav2 p").html();
p2 = pText;
$(".new2").hide();
$("p").removeClass("select2") ;
//先判断p1是否有只,有说明有筛选条件
if(p1){
//不为空说明第二个筛选条件已存在
switch(p1)
{
case "全部":
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断pText是否为全部
if(pText == '全部'){
//全部显示
$(this).parent().show();
}//用当前p的文本进行比较,如果相同说明是这个input
else if(pText == inputText.trim()){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
});
break;
case "自然之心":
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断左边的pText是否为自然之心
if(inputText == '自然之心'){
//得到它下一个子节点的value,也就是右边的input
var a = $(this).next().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "极简年华":
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断左边的pText是否为极简年华
if(inputText == '极简年华'){
//得到它下一个子节点的value,也就是右边的input
var a = $(this).next().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "时光海":
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断左边的pText是否为时光海
if(inputText == '时光海'){
//得到它下一个子节点的value,也就是右边的input
var a = $(this).next().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "西雅图":
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断左边的pText是否西雅图
if(inputText == '西雅图'){
//得到它下一个子节点的value,也就是右边的input
var a = $(this).next().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "翰墨拾香":
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断左边的pText是否为翰墨拾香
if(inputText == '翰墨拾香'){
//得到它下一个子节点的value,也就是右边的input
var a = $(this).next().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "爆款儿童房":
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断左边的pText是否为爆款儿童房
if(inputText == '爆款儿童房'){
//得到它下一个子节点的value,也就是右边的input
var a = $(this).next().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
case "科技儿童房":
$('.wy-Module-con .danlisty').each(function(){
var inputText = $(this).val();
//先判断左边的pText是否为科技儿童房
if(inputText == '科技儿童房'){
//得到它下一个子节点的value,也就是右边的input
var a = $(this).next().attr("value");
//用当前p的文本进行比较,如果相同说明是这个input
if(a == pText){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
}
});
break;
default:
}
}else{
$('.wy-Module-con .danlisty2 ').each(function(){
var inputText = $(this).val();
//先判断pText是否为全部
if(pText == '全部'){
//全部显示
$(this).parent().show();
}//用当前p的文本进行比较,如果相同说明是这个input
else if(pText == inputText.trim()){
//此时为相同,显示
$(this).parent().show();
}else{
//此时不同
$(this).parent().hide();
}
});}
})
});
----------------------------------