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

這是我現在在控制台中得到的。 我首先記錄輸入的值，然后是類列表，然后切換“活動”，然后再次記錄類列表。

問題是更改實際上並未推送到 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" ]

並且所有元素都附加了偵聽器 -

另一個更新

似乎問題可能與我重復使用設置事件偵聽器的函數調用有關。 但我不明白為什么這會導致問題，因為我實際上並沒有再次設置事件偵聽器。

標簽第一次添加事件偵聽器時，我給它一個名為“已初始化”的類 - 無論何時調用該函數，它都會首先檢查該類，如果它不存在，則添加事件偵聽器。

我這樣做是因為我也在我的應用程序的其他地方使用相同的代碼在 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>