Question

我有一个复选框。它的名称是filterAll。我希望它是活跃的。所有显示数组。并且当复选框被禁用时。所有数组隐藏。我想为此操作使用过滤器。但是我的代码不起作用。

我有两个复选框。我希望任何一个复选框处于活动状态。只需选中该复选框的信息即可。

let FlyList = [{

    "flkind": "systemi"
  }, {

    "flkind": "systemi"
  }, {

    "flkind": "systemi"
  },
  {

    "flkind": "charteri"

  }, {

    "flkind": "charteri"
  }, {

    "flkind": "charteri"
  },
];

let filter = FlyList.filter(item => {
  if (item.flkind === 'charteri') {
    item.style.display = 'block';
  } else {
    item.style.display = 'none';
  }
});

<input type="checkbox" name="FilterAll" id="FilterAll" class="individual"></input>
<input type="checkbox" name="checkFilter" id="checkFilter" class="individual"></input>
<input type="checkbox" name="checkFilter2" id="checkFilter2" class="individual"></input>
<div class="full-item">

  <div class="item-sort">

    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>systemi</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: grey">image</div>
      <div class="time" style="background: grey"><span>systemi</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: grey">image</div>
      <div class="time" style="background: grey"><span>systemi</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>charteri</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>charteri</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>charteri</span></div>
    </div>


  </div>

</div>

Answer 1

如果要通过复选框控制元素的显示/隐藏，下面是一个简化的示例：

const content = document.getElementById('content'),
  filters = document.getElementById('filters');

filters.addEventListener('change', function(e) {
  let cb = e.target;
  [...content.querySelectorAll(`.${cb.value}`)].forEach(el => 
    el.style.display = 
      cb.checked 
        ? 'block' 
        : ''
    )
})

.a,
.b {
  display: none;
}

<fieldset class="filter" id="filters">
  <legend>Filter</legend>
  <input type="checkbox" value="a" id="a" /><label for="a">a</label>
  <br />
  <input type="checkbox" value="b" id="b" /><label for="b">b</label>
</fieldset>

<div id="content">
  <div class="a">This will be visible if checkbox#a is checked</div>
  <div class="b">This will be visible if checkbox#b is checked</div>
</div>

按复选框过滤

1 个答案: