javascript - 删除动态创建 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')在点击处理程序中 - 这会给我一个未定义的错误。我无法在未定义的情况下删除类。

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

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)

    })

  }    
}