在动态创建li项目时删除类

Question

我有这个功能，创建一个<li>项目列表

function PrintListItems(nodes) {
  while (resultUl.firstChild) {
    resultUl.removeChild(resultUl.firstChild)
  }

  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i]

    var li = resultUl.appendChild(document.createElement('li'))
    li.setAttribute('data-id', i)

    for (var key in node) {
      var address = node['address'] + ', ' + node['zipcode'] + ' ' + node['city']

      if (key !== 'zipcode' && key !== 'city') {
        var span = document.createElement('span')

        span.className = key

        if (key === 'phone' || key === 'email' || key === 'web') {
          span.className += ' icon icon-' + key
        }

        span.textContent = (key === 'address') ? address : node[key]

        li.appendChild(span)
      }
    }
    resultListItem.push(li)
  }
  resultElm.addClass('active')
}

nodes参数是来自REST API的JSON

然后我有这个功能

function ListItemHandler() {
  for (var i = 0; i < resultListItem.length; i++) {
    resultListItem[i].addEventListener('click', function() {
      var markerId = this.getAttribute('data-id')
      this.addClass('active')
      googleMaps.selectMarkers(markerId)
    })
  }
}

这将标记具有活动类的<li>项目，这是有效的。但我想从其他<li>项目中删除“活动”类。

我不能在点击处理程序中执行resultListItem[i].removeClass('active') - 这会给我一个未定义的错误。我无法在undefined上删除类。

我可以以某种方式删除“不是这个”的类吗？

Answer 1

您必须为点击处理程序中的每个li元素删除与您单击的元素不同的类。 请尝试以下代码

function ListItemHandler () {

  for (var i = 0; i < resultListItem.length; i++) {

    resultListItem[i].addEventListener('click', function () {
      for (var j = 0; j < resultListItem.length; j++) {
         resultListItem[j].removeClass('active')
      }
      var markerId = this.getAttribute('data-id')
      this.addClass('active')
      googleMaps.selectMarkers(markerId)

    })

  }    
}

Answer 2

在将类添加到元素之前执行此操作

let list = document.getElementsByTagName("li").getElementsByClassName("active");
for (let item of list) {
    if (resultListIem.indexOf(item) === -1) {
        item.classList.remove("active")
    }
}

Answer 3

你能试试吗？

resultListItem[i].classList.remove('active')