Javascript:如何为这样的列表创建过滤器？

Question

我对 Javascript 完全是菜鸟，所以我必须问你们，我怎样才能做到这一点:

我有 3 个这样的复选框:

<ul class="bottom">
    <li><input checked="true" type="checkbox" value="large" /><label>Large</label></li>
    <li><input checked="true" type="checkbox" value="medium" /><label>Medium</label></li>
    <li><input checked="true" type="checkbox" value="small" /><label>Small</label></li>
</ul>

然后我有一个像这样的列表:

<ul class="main-menu">
    <ul class="row-1">
        <li class="full" data-type="large">
            <div class="onet-display">
                <?php if ($image = $post->get('image.src')): ?>
                    <a class="onet-display-block" href="<?= $view->url('@blog/id', ['id' => $post->id]) ?>"><img class="onet-thumb" src="<?= $image ?>" alt="<?= $post->get('image.alt') ?>"></a>
                <?php endif ?>
                <h1 class="onet-thumb-title"><a href="<?= $view->url('@blog/id', ['id' => $post->id]) ?>"><?= $post->title ?></a></h1>
                <div class="uk-margin"><?= $post->excerpt ?: $post->content ?></div>
            </div>
        </li>
        <li class="half" data-type="medium">...</li>
        <li class="full" data-type="small">...</li>
        <li class="half" data-type="large">...</li>
    </ul>
</ul>

现在我想做一个类似过滤器的东西。我想添加 class="showItem/hideItem"到<li>元素和类更改为 "showItem"一旦<input value="large/medium/small">处于事件状态。

我希望有人理解我的意思，并对我糟糕的英语表示歉意。谢谢。

Answer 1

我选择隐藏/显示，但你可以更改

lis[j].style.display = this.checked ? “”:“无”；

到

lis[j].className = this.checked ？ “显示项目”:“隐藏项目”；

如果需要

纯 JS

window.onload = function() {
  var filter = document.querySelectorAll(".filter");
  for (var i = 0; i < filter.length; i++) {
    filter[i].onclick = function() {
      var filter = document.querySelectorAll(".filter");
      for (var i = 0; i < filter.length; i++) {
        var lis = document.querySelectorAll("li[data-type='" + this.value + "']");
        for (var j = 0; j < lis.length; j++) {
          lis[j].style.display = this.checked ? "" : "none";
        }
      }
    }
  }
}

<ul class="bottom">
  <li>
    <input class="filter" checked="true" type="checkbox" value="large" />
    <label>Large</label>
  </li>
  <li>
    <input class="filter" checked="true" type="checkbox" value="medium" />
    <label>Medium</label>
  </li>
  <li>
    <input class="filter" checked="true" type="checkbox" value="small" />
    <label>Small</label>
  </li>
</ul>

<ul class="main-menu">
  <ul class="row-1">
    <li class="full" data-type="large">Large 1</li>
    <li class="half" data-type="medium">Medium 1</li>
    <li class="full" data-type="small">Small 1</li>
    <li class="half" data-type="large">Large 2</li>
  </ul>
</ul>

jQuery

$(function() {
  $(".filter").on("click",function() {
    $(".filter").each(function() {
      $("li[data-type='"+this.value+"']").toggle(this.checked);
    });
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="bottom">
    <li><input class="filter" checked="true" type="checkbox" value="large" /><label>Large</label></li>
    <li><input class="filter" checked="true" type="checkbox" value="medium" /><label>Medium</label></li>
    <li><input class="filter" checked="true" type="checkbox" value="small" /><label>Small</label></li>
</ul>

<ul class="main-menu">
    <ul class="row-1">
        <li class="full" data-type="large">Large 1</li>
        <li class="half" data-type="medium">Medium 1</li>
        <li class="full" data-type="small">Small 1</li>
        <li class="half" data-type="large">Large 2</li>
    </ul>
</ul>