Question

我发现了一个带有filter和sort功能的演示，几乎可以满足我的所有要求。问题不在于我想把它们排在彼此之下。

你们可以在这里看到我的意思：http://1337zone.WIN

过滤器按钮下方的这些框需要彼此相邻，而不是彼此相邻。我认为他们是用JavaScript做的。当我删除JS文件时，它根本不起作用。

最好的选择是自己做。我正在搜索它很长一段时间，我只是放弃了 - 我不懂JavaScript。

它基本上是这样的：

<div class="grid">
  <div class="element-item metal transition green" data-category="transition">
    <h5 class="name">Hallo</h5>
    <p class="symbol">7</p>
    <p class="number">153</p>
    <p class="weight">53</p>
  </div>
  <div class="element-item metalloid blue" data-category="metalloid">
    <h5 class="name">Hello</h5>
    <p class="symbol">1</p>
    <p class="number">521</p>
    <p class="weight">12</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Hi</h5>
    <p class="symbol">3</p>
    <p class="number">83</p>
    <p class="weight">20</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Was?</h5>
    <p class="symbol">3</p>
    <p class="number">82</p>
    <p class="weight">20</p>
  </div>
</div>

在课堂上，您可以看到"cyan"，"blue"，"green"和此代码：

<button class="button" data-filter=".green">green</button>

做了一些魔术，让它发挥作用。不要问我怎么样，因为我不知道怎么做。

是否可以仅在HTML和CSS中执行此操作？

Answer 1

这可以通过以下方式不使用插件来完成。使用jQuery中的 data() 函数获取数据过滤器的值，并使用它来显示具有该类名的项目。

＆＃13;

$(document).ready(function() {
  $('.button').on('click', function() {
    var classSelector = $(this).data('filter');
    $('.grid .element-item').hide();
    $('.grid').find(classSelector).show();
  });
});

＆＃13;

.green{
  background-color:green;
}
.cyan{
  background-color:cyan;
}
.blue{
  background-color:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="grid">
  <div class="element-item metal transition green" data-category="transition">
    <h5 class="name">Hallo</h5>
    <p class="symbol">7</p>
    <p class="number">153</p>
    <p class="weight">53</p>
  </div>
  <div class="element-item metalloid blue" data-category="metalloid">
    <h5 class="name">Hello</h5>
    <p class="symbol">1</p>
    <p class="number">521</p>
    <p class="weight">12</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Hi</h5>
    <p class="symbol">3</p>
    <p class="number">83</p>
    <p class="weight">20</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Was?</h5>
    <p class="symbol">3</p>
    <p class="number">82</p>
    <p class="weight">20</p>
  </div>
</div>

<button class="button" data-filter=".green">green</button>
<button class="button" data-filter=".cyan">cyan</button>
<button class="button" data-filter=".blue">blue</button>

＆＃13;

我该如何制作这样的过滤器？

1 个答案: