Question

我有一个代码（在此处找到），可以通过data-attribute元素过滤列表，我需要将jquery转换为js

$('.checkbox').change(function() {

  $('li.list').each(function(i, item) {
    var color = $(this).data('color');
    var visible = $('input.checkbox[data-color="' + color + '"]:checked').length > 0;
    visible ? $(this).show() : $(this).hide();
  });


  if ($('input.checkbox:checked').length === 0) {
    $('li.list').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" data-color="blue"> Blue
<input type="checkbox" class="checkbox" data-color="green"> Green
<input type="checkbox" class="checkbox" data-color="red"> Red

<ul>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
  <li class="list" data-color="red">Red</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
</ul>

我尝试使用forEach循环，但我不知道如何获得相同的结果

const checkbox = document.querySelectorAll(".checkbox");
const list = document.querySelectorAll(".list");


 checkbox.forEach((item)=> {
  item.addEventListener('change', () => {

    var color = item.getAttribute('data-color');

    //Do another loop on list 




  })

 })

该怎么做？

Answer 1

一个选择是构造一个独立的函数，该函数检查.list复选框以显示要显示的颜色，然后遍历display s并适当设置const checkbox = document.querySelectorAll(".checkbox"); const list = document.querySelectorAll(".list"); const examineList = () => { const checkedColors = [...document.querySelectorAll('.checkbox:checked')] .filter(input => input.checked) .map(input => input.dataset.color); const showColor = checkedColors.length ? color => checkedColors.includes(color) : color => true; // if no colors are selected, always show every <li> document.querySelectorAll('.list').forEach((li) => { li.style.display = showColor(li.dataset.color) ? 'list-item' : 'none'; }); }; checkbox.forEach((item) => { item.addEventListener('change', examineList); });样式。对于每个复选框，添加指向该函数的更改侦听器：

<label><input type="checkbox" class="checkbox" data-color="blue"> Blue</label>
<label><input type="checkbox" class="checkbox" data-color="green"> Green</label>
<label><input type="checkbox" class="checkbox" data-color="red"> Red</label>

<ul>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
  <li class="list" data-color="red">Red</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
</ul>

I tried to read the list of tuples and store it into another list to get the first element of each tuple in the list.

  getBankList([BankData|T]) ->
    {BankName, Resource}=T,
    createList(BankName),
    getBankList(T).

createList(Name)->
  List = [],
 List2 = [Name|list1].

[{jill,450},
{joe,157},
{bob,100},
{sue,125},
{pat,344}].

Answer 2

我想给出一个更简洁的版本。

我在复选框周围添加了标签和环绕元素，作为将委托侦听应用于的锚点（因此，此代码中仅需要侦听器）。

colorfilter.addEventListener('change', (e) => {
  let selectedColors = [...colorfilter.querySelectorAll(':checked')].map(x => x.dataset.color);
  for (const listItem of document.querySelectorAll('.list')) {
    listItem.classList[selectedColors.includes(listItem.dataset.color) 
      ? 'add' 
      : 'remove']('show');
  }
})

.list {
  display: none;
}

.show {
  display: list-item;
}

<div id="colorfilter">
  <label><input type="checkbox" class="checkbox" data-color="blue"> Blue</label>
  <label><input type="checkbox" class="checkbox" data-color="green"> Green</label>
  <label><input type="checkbox" class="checkbox" data-color="red"> Red</label>
</div>

<ul>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
  <li class="list" data-color="red">Red</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
</ul>

将Jquery代码转换为通过复选框过滤列表到Vanilla JS

2 个答案: