如何有条件地向元素添加类?

时间:2019-06-24 00:24:52

标签: javascript html css

我正在寻找使用单选按钮创建一个过滤器,以向与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>

0 个答案:

没有答案