classList.add()、classList.remove()和classList.toggle()实际上并没有改变classList

Question

我让以下代码从单击事件侦听器函数中执行

if (target.tagName === 'LABEL'){
    
    if (target.classList.contains('active')){
        console.log('removing')
        target.classList.remove('active')
    }

    else {
        console.log('adding')
        console.log(target.classList)
        target.classList.add("active");
        console.log(target.classList)
    }
}

在Chrome和Firefox中，问题是它实际上并没有添加这个类，我不知道为什么。

同样的代码可以在其他地方运行，但在这一特定部分中它不能运行。

以下是我从控制台获得的内容

click registered 

LABEL 

adding 

DOMTokenList(3)
​
0: "topic-label"
​
1: "btn"
​
2: "initialized"
​
length: 3
​
value: "topic-label btn initialized"
​
<prototype>: DOMTokenListPrototype { item: item(), contains: contains(), add: add(), … }

DOMTokenList(4)
​
0: "topic-label"
​
1: "btn"
​
2: "initialized"
​
length: 3
​
value: "topic-label btn initialized"
​
<prototype>: DOMTokenListPrototype { item: item(), contains: contains(), add: add(), … }

最小化DOMTokenList我看到了以下内容

click registered 

LABEL 

adding 

DOMTokenList(3) [ "topic-label", "btn", "initialized" ]


DOMTokenList(4) [ "topic-label", "btn", "initialized", "active" ]

我可以看到我正确地进入了代码的该区域，并且我可以看到DomTokenList发生了变化-但实际的classList没有变化。

我甚至不知道如何开始搜索这个，所以也许有人知道发生了什么？

提前谢谢。RR

更多细节

下面是完整的事件侦听器方法

function initialize_topics(){

    var all_topics = byClass('topic-label')
    
    for (var i=0; i< all_topics.length; i++){
        
        if (all_topics[i].classList.contains('initialized')){
            continue
        }
        else{
            all_topics[i].classList.add('initialized');
            all_topics[i].addEventListener("click", function(e){
                //console.log('click registered')
                e=e || window.event;
                var target = e.target || e.srcElement;
               
                //console.log(target.tagName)        

                
                if (target.tagName === "LABEL"){
                    /*
                    if (target.classList.contains('active')){
                        console.log('removing')
                        target.classList.remove('active')
                    }

                    else {
                        console.log('adding')
                        console.log(target.classList)
                        target.classList.add("active");
                        console.log(target.classList)
                    }
                    */
                    console.log(target.firstElementChild.value)
                    console.log(target.classList)
                    target.classList.toggle('active')
                    console.log(target.classList)

                }
            });

        }
        
    }

}

这就是我在这里的目标HTML

<div class="lurnby_data_group topics-group" data-toggle="buttons">
   <h6 class="inline-block">Topics:</h6>
   <span  id="CreateTopic">
       <button onclick ="NewTopic()" class="main-button save">
            Create new topic
       </button>
   </span><br>
   <div class = "topics-all">
      {% for topic in topics %}
      <label class="topic-label btn">
         <input name = "topics" type="checkbox" value="{{topic.title}}">
         {{topic.title}}
      </label>
      {% endfor %}
      <span id = "topicplaceholder"></span>
   </div>
</div>

它似乎也不能在Chrome上运行。这里有一个小的视频，你可以看到更多的发生了什么。

https://www.loom.com/share/12703437f9a04d4e9ef44d3c933353de

这是我现在在控制台中得到的东西。我首先记录输入的值，然后记录类列表，然后切换到“active”，然后再次记录类列表。

问题是更改实际上并没有被推送到DOM。

test 
DOMTokenList(3) [ "topic-label", "btn", "initialized" ]

DOMTokenList(4) [ "topic-label", "btn", "initialized", "active" ]

hellop 
DOMTokenList(3) [ "topic-label", "btn", "initialized" ]

DOMTokenList(4) [ "topic-label", "btn", "initialized", "active" ]

所有的元素都有监听器-

​

​

另一个更新

问题可能出在我重复使用设置事件侦听器的函数调用上。但我不明白为什么这会导致这个问题，因为我实际上并没有再次设置事件侦听器。

当标签第一次添加事件侦听器时，我给它一个名为'initialized‘的类--任何时候调用函数时，它都会首先检查那个类，如果这个类不存在，它就会添加事件侦听器。

我这样做是因为我也在应用程序的其他地方使用相同的代码在ajax加载的模式中初始化类似的标签。

我不明白为什么这会引起某种冲突。

有什么想法吗？

Answer 1

尽管classList是只读的，但可以使用add()、remove()和toggle()方法对其进行更新。

add()和remove()在代码片段中工作得很好。您是否正在检入一些在线编辑器(如jsfiddle等)？

注意: IE9和较早版本的浏览器不支持classList。

​

<!DOCTYPE html>
<html>
<head>
<style>
.active {
  background-color: coral;
}
</style>
</head>
<body>

<button onclick="myFunction()">Try it</button>

<label id="myDIV">
I am a Label element
</label>

<script>
function myFunction() {
  
  let elem = document.getElementById("myDIV");
  if(elem.classList.contains("active"))
  {
    elem.classList.remove("active")
  }
  else
  {
    elem.classList.add("active");
  }
}
</script>

</body>
</html>

​