Question

我目前在页面顶部有一个Dropdown，下面有一个很长的列表（83行，每行4个）。

以下是该方案：

我从下拉列表中的状态列表中选择一个状态，列表中与状态不匹配的项目淡出，允许匹配的项目“弹出”到顶部。一旦你回到默认状态，所有其他人都会重新开始。

如果状态没有匹配的项目，我会显示一条消息“找不到选项”

我很确定我已经在某处投资组合上看到了这一点，但我真的不知道如何实现这一目标。有没有人知道如何实现这一点，或者能指出我正确的方向？

<select id="filter" name="filter">
    <option value="-1">Filter items</option>
    <option value="sc">South Carolina</option>
    <option value="nc">North Carolina</option>
</select>



<div id="container">

<div class="box state-nc"></div>
<div class="box state-sc"></div>
<div class="box state-nc"></div>
<div class="box state-sc"></div>
<div class="box state-nc"></div>
<div class="box state-sc"></div>
<div class="box state-nc"></div>
<div class="box state-sc"></div>    
</div>

Answer 1

首先，对83个项目使用固定的宽度/高度并将它们全部浮动到左侧，因此它们自然形成4个项目的行，并且当一些项目被隐藏时将重新流动（“弹出”）。

为每个项目提供类似“state-ca”或“state-or”的类（或者如果您更喜欢data-state =“ca”或data-state =“or”）。然后是这样的事情：

var $all_items = $('.item');
var state = $dropdown.val();
var $items = $('.item[class!="state-' + state + '"]');
// or this:
// var $items = $('.item[data-state!="' + state + '"]');
if ($items.size() == $all_items) {
  $all_items.fadeOut();
  // show "no options found" instead
} else {
  $all_items.show();
  $items.fadeOut();
}

（未经测试，所以我相信你需要做一些调整。）

通过下拉列表使用Jquery过滤“项目”

1 个答案: