使用单选按钮过滤

Question

我正在制作一个模型网站的问题是我试图过滤我的内容使用单选按钮值每个都有自己的值(manga,manwha)和内容有不同的值类标签(manga,manwha)现在我在JavaScript中尝试了一些东西，但它只拿走内容时，radiobtn被选中但它需要做相反的事，只显示内容被选中

a使用的代码如下，但添加了我自己的东西

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';
}
}
}

Answer 1

如果你的问题是你的代码隐藏相应的radioButton的内容，你只需要使它隐藏所有的内容不对应于radioButton。要做到这一点，你只需要从

反转if正在做的事情

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';
}

Answer 2

如果你需要反转的行为，你可以改变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';
}

Answer 3

下面是一个示例，它从选中的输入中收集所有值，并在每次更改时将它们放入数组中。然后，它循环遍历要显示或隐藏的元素，并检查每个元素的数据类型值是否与被检查输入的值之一相对应。

默认隐藏元素，只有通过添加类才能显示它们。

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>