我正在寻找使用单选按钮创建一个过滤器,以向与data-tag属性的单选输入值匹配的元素添加一个类。
似乎一切正常,但是该类已应用于所有元素,而不仅仅是匹配的元素。
function applyFilter(activeFilter) {
var list = document.querySelectorAll(".item");
for (var i = 0; i < list.length; ++i) {
var tag = list[i].getAttribute("data-tag");
if (tag = activeFilter) {
console.log(tag);
list[i].classList.add("active");
}
}
};
.active {
background: red;
}
<label><input name="filter" type="radio" value="tag1" onchange="applyFilter(value);" checked><span>Filter 1</span></label>
<label><input name="filter" type="radio" value="tag2" onchange="applyFilter(value);"><span>Filter 2</span></label>
<label><input name="filter" type="radio" value="tag3" onchange="applyFilter(value);"><span>Filter 3</span></label>
<ul class="list">
<li class="item" data-tag="tag1">Tag 1</li>
<li class="item" data-tag="tag2">Tag 2</li>
<li class="item" data-tag="tag3">Tag 3</li>
</ul>