87,910
社区成员
发帖
与我相关
我的任务
分享回避一个前端进行多重判断问题的方法，看看这有木有高手。。。。。
直接上代码，有这么一组数据，要在前端进行多重条件的筛选，思维看起来很简单的，但代码无法回避冗杂的多重判断。
然后是筛选条件是4个select标签，分别是对应ABCD四个属性的可能选择，但会出现“不限”的选项，即ABCD选项可能是不选的状态，然后把符合条件的E属性放到数组里输出。上html代码
估计这儿没有人能回避多重判断把，，，，
99%的人一定会写出这种if代码或者switch代码，每个select标签都有2种状态，用到条件，不用到条件有2的4次方也就是16种组合。。。。。
然后还有1%人会考虑数据传到后台用Linq，如果数据量巨大，而且要求查询频繁，就坑人了，，，，
var data=[
{
A:'农民',
B:'小姐',
C:'大哥',
D:'包大',
E:0
},
{
A:'农民工',
B:'小姐',
C:'大哥哥',
D:'包大',
E:1
},
{
A:'农民工',
B:'小姐姐',
C:'大哥哥',
D:'包大',
E:2
},
{
A:'农民',
B:'小姐',
C:'大哥',
D:'包大人',
E:3
},
{
A:'农民工',
B:'小姐姐',
C:'大哥哥',
D:'包大人',
E:4
},
{
A:'农民',
B:'小姐',
C:'大哥哥',
D:'包大',
E:5
},
{
A:'农民',
B:'小姐姐',
C:'大哥哥',
D:'包大',
E:6
},
{
A:'农民工',
B:'小姐',
C:'大哥',
D:'包大人',
E:7
}
]
然后是筛选条件是4个select标签，分别是对应ABCD四个属性的可能选择，但会出现“不限”的选项，即ABCD选项可能是不选的状态，然后把符合条件的E属性放到数组里输出。上html代码
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
A
<select>
<option>农民</option>
<option>农民工</option>
<option>不限</option>
</select>
</div>
<div>
B
<select>
<option>小姐</option>
<option>小姐姐</option>
<option>不限</option>
</select>
</div>
<div>
C
<select>
<option>大哥</option>
<option>大哥哥</option>
<option>不限</option>
</select>
</div>
<div>
D
<select>
<option>包大</option>
<option>包大人</option>
<option>不限</option>
</select>
</div>
</body>
</html>
估计这儿没有人能回避多重判断把，，，，
99%的人一定会写出这种if代码或者switch代码，每个select标签都有2种状态，用到条件，不用到条件有2的4次方也就是16种组合。。。。。
然后还有1%人会考虑数据传到后台用Linq，如果数据量巨大，而且要求查询频繁，就坑人了，，，，
if(){
if(){
if(){
if(){}
else{}
}
else{}
}
else{}
}
else{}
..........
...全文
请发表友善的回复…
发表回复
JokerSoulClub 2017-03-16
- 打赏
- 举报
汗，果然是我思考不够，没有考虑到可以把属性放到数组里进行循环判断。。。。
似梦飞花 2017-03-16
- 打赏
- 举报
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
A
<select>
<option>农民</option>
<option>农民工</option>
<option>不限</option>
</select>
</div>
<div>
B
<select>
<option>小姐</option>
<option>小姐姐</option>
<option>不限</option>
</select>
</div>
<div>
C
<select>
<option>大哥</option>
<option>大哥哥</option>
<option>不限</option>
</select>
</div>
<div>
D
<select>
<option>包大</option>
<option>包大人</option>
<option>不限</option>
</select>
</div>
<div id="text"></div>
<script type="text/javascript">
var data=[
{
A:'农民',
B:'小姐',
C:'大哥',
D:'包大',
E:0
},
{
A:'农民工',
B:'小姐',
C:'大哥哥',
D:'包大',
E:1
},
{
A:'农民工',
B:'小姐姐',
C:'大哥哥',
D:'包大',
E:2
},
{
A:'农民',
B:'小姐',
C:'大哥',
D:'包大人',
E:3
},
{
A:'农民工',
B:'小姐姐',
C:'大哥哥',
D:'包大人',
E:4
},
{
A:'农民',
B:'小姐',
C:'大哥哥',
D:'包大',
E:5
},
{
A:'农民',
B:'小姐姐',
C:'大哥哥',
D:'包大',
E:6
},
{
A:'农民工',
B:'小姐',
C:'大哥',
D:'包大人',
E:7
}
];
var select = [...document.getElementsByTagName("select")];
const proxy=new Proxy({},{
set(target,key,value){
Reflect.set(target,key,value);
(Object.keys(proxy).length==select.length)&&(alert(filter()));
return true;
},
get(target,key){
return Reflect.get(target,key);
}
});
function filter(){
return data.filter(function(item){
let keys=Object.keys(proxy);
for(let key of keys){
if(proxy[key] != '不限' && item[key] != proxy[key]){
return false;
}
}
return true;
}).map(item=>item.E);
}
function getValue(){
const div= this.parentNode,
key=div.childNodes[0].nodeValue.replace(/\s/g,'');
proxy[key]=this[this.selectedIndex].innerHTML;
}
function init(){
for(let s of select){
getValue.call(s);
s.onchange=getValue;
}
}
init();
</script>
</body>
</html>
似梦飞花 2017-03-15
- 打赏
- 举报
这里的难点是根本没明白你想做什么
天际的海浪 2017-03-15
- 打赏
- 举报
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
A
<select onchange="filter()">
<option>农民</option>
<option>农民工</option>
<option>不限</option>
</select>
</div>
<div>
B
<select onchange="filter()">
<option>小姐</option>
<option>小姐姐</option>
<option>不限</option>
</select>
</div>
<div>
C
<select onchange="filter()">
<option>大哥</option>
<option>大哥哥</option>
<option>不限</option>
</select>
</div>
<div>
D
<select onchange="filter()">
<option>包大</option>
<option>包大人</option>
<option>不限</option>
</select>
</div>
<div id="text"></div>
<script type="text/javascript">
var data=[
{
A:'农民',
B:'小姐',
C:'大哥',
D:'包大',
E:0
},
{
A:'农民工',
B:'小姐',
C:'大哥哥',
D:'包大',
E:1
},
{
A:'农民工',
B:'小姐姐',
C:'大哥哥',
D:'包大',
E:2
},
{
A:'农民',
B:'小姐',
C:'大哥',
D:'包大人',
E:3
},
{
A:'农民工',
B:'小姐姐',
C:'大哥哥',
D:'包大人',
E:4
},
{
A:'农民',
B:'小姐',
C:'大哥哥',
D:'包大',
E:5
},
{
A:'农民',
B:'小姐姐',
C:'大哥哥',
D:'包大',
E:6
},
{
A:'农民工',
B:'小姐',
C:'大哥',
D:'包大人',
E:7
}
];
var select = document.getElementsByTagName("select");
function filter() {
var g = {
A:select[0].options[select[0].selectedIndex].text,
B:select[1].options[select[1].selectedIndex].text,
C:select[2].options[select[2].selectedIndex].text,
D:select[3].options[select[3].selectedIndex].text
};
var arr = [];
dataFor: for (var i = 0; i < data.length; i++) {
for (var n in g)
if (g[n]!="不限" && g[n]!=data[i][n])
continue dataFor;
arr.push(data[i].E);
}
document.getElementById("text").innerHTML = arr;
}
</script>
</body>
</html>
JokerSoulClub 2017-03-15
- 打赏
- 举报
你这样的话如果我有ABCDEFGHIJKLMLOPQRSTUVWXYZ 26个属性任意选择，需要写多少冗杂的代码？？？？？？？
天际的海浪 2017-03-15
- 打赏
- 举报
用个8*4的双重循环就好了。
