首页 > 解决方案 > 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. 

标签: jqueryfilter

解决方案


通过使用由关键字数组(组)组成的对象,然后使用过滤器检查每个组中是否至少有一个关键字匹配来解决。


推荐阅读