Question

我是Javascript中的一个完全noob所以我不得不问你们，我怎么能这样做：

我有3个像这样的checkboxex：

<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 ? "" : "none";

到

lis[j].className = this.checked ? "showItem" : "hideItem";

如果需要

普通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>

Answer 2

如果你想使用普通的javascript那么......

＆＃13;

var inputs = document.querySelectorAll('input[type="checkbox"]');

function showhide() {

  var elems = document.querySelectorAll('[data-type="' + this.value + '"]');
  for (var j = 0; j < elems.length; j++) {
    elems[j].classList.toggle("hide");
  }

}

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', showhide);

}

＆＃13;

.hide {
  display: none;
}

＆＃13;

<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>
and then I have a list like this:

<ul class="main-menu">
  <ul class="row-1">
    <li class="full" data-type="large">1</li>
    <li class="half" data-type="medium">2</li>
    <li class="full" data-type="small">3</li>
    <li class="half" data-type="large">4</li>
  </ul>
</ul>

＆＃13;

Javascript：如何为这样的列表制作过滤器？

2 个答案: