将jquery代码转换为filter list by复选框转换为普通JS

Marcel • 6 年前 • 1590 次点击

我有一个按数据属性元素过滤列表的代码(在这里找到),我需要从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 




  })

 })

怎么做?

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/34739

1590 次点击

文章 [ 2 ] | 最新文章 6 年前

• 1 楼

connexo 6 年前

我想为大家介绍一个更简洁的答案。

我在作为应用的定位点的复选框周围添加了标签和包装元素。 代表倾听 到(所以这段代码中只需要侦听器)。

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>

• 2 楼

CertainPerformance 6 年前

一个选项是构造一个独立的函数来检查 :checked 要显示的颜色的复选框,然后遍历 .list 并设置 display 风格得体。对于每个复选框,添加指向该函数的更改侦听器:

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>

登录后回复