jquery - jquery - 带有和-或的多个过滤器
问题描述
说我有这个:
<div class="red square">...</div>
<div class="white square">...</div>
<div class="blue square">...</div>
<div class="red triangle">...</div>
<div class="white triangle">...</div>
<div class="blue triangle">...</div>
<div class="red circle">...</div>
<div class="white circle">...</div>
<div class="blue circle">...</div>
如何选择(红色或白色)和(圆形或方形)?
这似乎有效:
$('div').filter('.red,.white').filter('.circle,.square').addClass('select');
但是,如果过滤器是可变的(存储在对象中),可能只有颜色选择、单一形状或具有其他组(如大小),例如:
filters = {color:".red,.blue", shape:".circle,.square"};
// or
filters = {color:".white", size:".medium,.small"};
$('div').filter(filters[color]).filter(filters[shape]).filter(filters[size]).addClass('select');
// This won't work when one of the object key is absent.
解决方案
通过使用由关键字数组(组)组成的对象,然后使用过滤器检查每个组中是否至少有一个关键字匹配来解决。