為什么classList.add不能用於html onClick

Question

我正在嘗試創建一個動態日歷。 我的第一步是在點擊時向某些元素添加類但是，我遇到了一個問題，classList.add（''）; 不在HTML中工作。 我可能做錯了我不確定。

<ul class="days">
  <li onClick='#'>1<li>
  <li onclick="this.classList.add('active')">2</li>
  <li onClick='#'>3</li>
  <li onClick='#'>4</li>
  <li onClick='#'>5</li>
  <li onClick='#'>6</li>
  <li onClick='#'>7</li>
  <li onClick='#'>8</li>
  <li onClick='#'>9</li>
  <li onClick='#'><span class="active">10</span></li>
</ul>

CSS

  /* Highlight the "current" day */
   .days li .active {
      padding: 5px;
      background: #1abc9c;
      color: white 
   }

我正在嘗試將onclick事件應用於數字2.但是classList.add（''）; 不工作。 我確定這是一個理由......任何幫助都會受到贊賞。

Answer 1

由於你的CSS規則或你的DOM，它不起作用。

.days li .active在<li>的子節點上將該樣式應用於active類，但是使用this.classList.add('active') ，您可以在<li>標記上添加active類，CSS規則應該是.days li.active 。

Answer 2

您的css選擇器錯誤，您需要刪除li和.active之間的.active

喜歡

.days li.active {
  padding: 5px;
  background: '#1abc9c';
  color: white 
}

Answer 3

首先，你的第一個li元素的html是錯誤的。

其次我認為你可能被你的css選擇器誤導了，因為第10個li元素有一個內部跨度而第二個沒有。 看看這個小提琴

https://jsfiddle.net/h6w7kaoy/1/

HTML：

 <ul class="days">
      <li onClick='#'>1</li>
      <li onClick="this.classList.add('active')">2</li>
      <li onClick='#'>3</li>
      <li onClick='#'>4</li>
      <li onClick='#'>5</li>
      <li onClick='#'>6</li>
      <li onClick='#'>7</li>
      <li onClick='#'>8</li>
      <li onClick='#'>9</li>
      <li onClick='#'><span class="active">10</span></li>
    </ul>

CSS：

li.active, li span.active {
  color: blue;
  font-weight: bold;
}

如果您嘗試從css選擇器中刪除li.active ，您將看到單擊li元素不會影響視覺效果（但仍在添加類;-)）

Answer 4

問題不classList問題是選擇器。 .days li .active將選擇所有具有類active的元素，這些元素位於<li> ， li位於具有類.days元素內。 不應該有任何空間b / w li和.active

.days li.active