javascript 使用RadioButton过滤

lvmkulzt  于 2023-04-04  发布在  Java
关注(0)|答案(3)|浏览(106)

我做了一个模型网站的问题是我试图过滤我的内容使用单选按钮woth每个有iets自己的值(manga,manwha)和内容有不同的值(manga,manwha)类标签现在我尝试了一些东西在JavaScript但它只带走了内容时radiobtn检查但它需要做相反的只显示内容是检查
使用的代码如下,但添加了我自己的东西

function filterItems() {
  // Get the selected radio button value
  var selectedValue = document.querySelector('input[name="checkbox3"]:checked').value;

  // Get all list items
  var items = document.querySelectorAll('#manga, #manwga');

  // Loop through each item and show/hide based on the selected radio button
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    if (item.getAttribute('data-type') === selectedValue || selectedValue === 'all') {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  }
}
6l7fqoea

6l7fqoea1#

如果你的问题是你的代码隐藏了对应于radioButton的内容,你只需要让它隐藏所有不对应于radioButton的内容。

if (item.getAttribute('data-type') === selectedValue || selectedValue === 'all') {
      item.style.display = 'block';
  } else {
      item.style.display = 'none';
  }

if (item.getAttribute('data-type') === selectedValue || selectedValue === 'all') {
      item.style.display = 'none';
  } else {
      item.style.display = 'block';
  }
bwleehnv

bwleehnv2#

如果你需要反转行为,你可以像这样改变if block,也可以去掉else block
实际上,循环中并不需要这个var item = items[i];-它只是内存消耗。
并且循环的主体将变为:

items[i].style.display = 'none';
if (
      items[i].getAttribute('data-type') !== selectedValue 
      && selectedValue !== 'all'
) {
      items[i].style.display = 'block';
}

另外,让我们正确使用dataset属性-dataset.type

items[i].style.display = 'none';
if (
      items[i].dataset.type !== selectedValue 
      && selectedValue !== 'all'
) {
      items[i].style.display = 'block';
}
mtb9vblg

mtb9vblg3#

下面是一个例子,它从检查的输入中收集所有值,并在每次更改时将它们放入一个数组中。然后,它循环遍历您想要显示或隐藏的元素,并检查每个元素的数据类型值是否与检查的输入的值之一相对应。
默认情况下隐藏元素,仅通过添加类来显示它们。

const contentTypes = document.querySelectorAll('.content-type');
const form = document.querySelector('form');

/**
 * This captures every "change" event that bubbles up.
 * So every input that has a changed value, like when you select or unselect it, will trigger the event listener.
 */
form.addEventListener('change', event => {
  // Get all the values of the checked inputs from the form.
  const formData = new FormData(form);
  
  // Put all the values in an array.
  const activeTypes = [...formData.values()];
  
  // Loop over each content type element
  for (const contentType of contentTypes) {
    const type = contentType.dataset.type;
    
    // If the data-type value is present in the activeTypes array..
    const isActiveType = activeTypes.includes(type);
    
    // Add the class if active, remove it if not.
    contentType.classList.toggle('active', isActiveType);
  }
});
.content-type {
  display: none;
}

.content-type.active {
  display: block;
}
<form>
  <label>
    <span>Manga</span>
    <input type="checkbox" name="types" value="manga"/>
  </label>

  <label>
    <span>Manwha</span>
    <input type="checkbox" name="types" value="manwha"/>
  </label>

  <label>
    <span>Manhua</span>
    <input type="checkbox" name="types" value="manhua"/>
  </label>
</form>

<div class="content-type" data-type="manga">
  Manga
</div>

<div class="content-type" data-type="manwha">
  Manga
</div>

<div class="content-type" data-type="manhua">
  Manhua
</div>

相关问题