元素修飾符classList.add和classList.remove無法按預期工作

Question

我有一個項目列表（ ul, li ），其中有一個類，當您單擊該項目時，該類設置了左邊框和粗體突出顯示。

當您單擊列表中的其他項目時，我想將樣式重置為原始項目，以使其恢復正常，然后在剛剛單擊的活動樣式上設置新樣式。

奇怪的是，DOM檢查顯示以前單擊的項目仍具有更改的類，但是當我輸出到控制台時卻說沒有。

 function myFunctionTest(id_word) {
  var items = document.getElementsByClassName("process-itemz");
         for (var i = items.length - 1; i >= 0; --i) {
         items[i].classList.remove("test123");
}

var element = document.getElementById(id_word);
  element.classList.add("test123");

}

和一個小提琴： https : //jsfiddle.net/y5kwmu6j/

Answer 1

兩件事情：

element.classList.add = "test123"; 應該是element.classList.add("test123");

您應該更改css規則的順序，以使.test123規則位於.test123 .process-itemz規則之后。 它們具有相同的特異性水平，因此以后的那些將獲勝。

Answer 2

如前所述，需要對語法進行一些更改，並且我重新格式化了循環。

隨附的代碼段有效-請確保您的JavaScript已鏈接到HTML文件中，或嵌入在腳本標簽之間。

 function myFunctionTest(id_word) { alert(1); var items = document.getElementsByClassName("process-itemz"); for (var i = 0; i < items.length - 1; i++) { items[i].classList.remove("test123"); } var element = document.getElementById(id_word); element.classList.add("test123"); } 

 .default { font-weight: 200; } .test123 { border-left: 1rem solid rgba(167, 194, 15, 0.623); font-weight: bold; } .process-itemz { border-left: 1rem solid rgba(167, 194, 15, 0); font-weight: inherit; } 

 <div class="default"> <ul id="foo"> <li> <span onclick="myFunctionTest(this.id)" id="testa123" class="process-itemz">&ThickSpace;&ThickSpace;&ThickSpace;&ThickSpace; Excavation Hire </span> </li> <li> <span onclick="myFunctionTest(this.id)" id="testb123" class="process-itemz">&ThickSpace;&ThickSpace;&ThickSpace;&ThickSpace; Rubbish Removal</span> </li> </ul> </div> 

Answer 3

另一個建議的答案是，您需要更改CSS選擇器的順序。 由於它們具有相同的優先級，因此.process-items選擇器將覆蓋.test123所有.test123 。

另一個建議是像這樣實際組合類選擇器：

.process-itemz.test123

在這種情況下，在CSS中順序無關緊要，因為此選擇器將始終更加具體。

請參閱“如何計算特異性？” 在MDN上

但是，根據使用情況，您的里程可能會有所不同。

 function myFunctionTest(id_word) { var items = document.getElementsByClassName("process-itemz"); for (var i = items.length - 1; i >= 0; --i) { items[i].classList.remove("test123"); } var element = document.getElementById(id_word); element.classList.add("test123"); } 

 .default { font-weight: 200; } .process-itemz { border-left: 1rem solid rgba(167, 194, 15, 0); font-weight: inherit; } .process-itemz.test123 { border-left: 1rem solid rgba(167, 194, 15, 0.623); font-weight: bold; } 

 <div class="default"> <ul id="foo"> <li> <span onclick="myFunctionTest(this.id);" id="testa123" class="process-itemz">&ThickSpace;&ThickSpace;&ThickSpace;&ThickSpace; Excavation Hire </span> </li> <li> <span onclick="myFunctionTest(this.id);" id="testb123" class="process-itemz">&ThickSpace;&ThickSpace;&ThickSpace;&ThickSpace; Rubbish Removal</span> </li> </ul> </div>