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上的类。

我可以以某种方式在“ not this”上移除类吗？

Answer 1

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

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

Answer 2

您必须删除单击处理程序中与单击的li元素不同的每个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 3

您可以尝试

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

动态创建li项目时删除类

3 个答案: