使用 javascript 更改標簽的 className

Question

我正在嘗試創建一個項目列表，並且我希望用戶選擇其中一個作為默認項目（稍后將其與其他進程一起使用）。

我的問題是，我有一個項目列表，每個項目都有一個唯一的 id，並將默認類設置為RegularIcon ，如下所示：

<span :id="project.id" class="RegularIcon" @click="changeIcon(project.id, projectKey)"></span>

projectKey是當前項目在列表中的索引。

我的功能如下：

changeIcon: function(projectId, projectIndex) {

  let ClassName = document.getElementById(projectId).className;

  if ( ClassName == 'RegularIcon' )
  { 

    var x = document.getElementsByClassName("SolidIcon");
    var i;

    if ( x.length != 0 ) 
    {
      for ( i=0; i < this.ProjectsList.length; i++ )
      {
        if ( i != projectIndex ) 
        { 
          x[i].className = 'RegularIcon'; 
        }
        else {
          x[i].className = 'SolidIcon'; 
        }
      }
    }
    else 
    {
      document.getElementById(projectId).className = 'SolidIcon'; 
    }

  }
  else 
  { 
    document.getElementById(projectId).className = 'RegularIcon'; 
  }

},

我的想法是當用戶單擊圖標（默認未填充）時，單擊它后將變為實心並填充，同時，所有其他項目圖標將變為（未填充 - 常規）。

但我收到一條錯誤消息：

Uncaught TypeError: Cannot set property 'classList' of undefined

Answer 1

您可以使用Vue 的類綁定來根據條件設置特定類，而不是 DOM 操作：

<span :class="{ CLASS1: CONDITION1, CLASS2: CONDITION2, ... }">

在您的情況下，綁定將是：

<span :class="{ RegularIcon: CONDITION, SolidIcon: !CONDITION }">

...其中CONDITION基於用戶選擇（例如，選擇的索引）。 例如，當圖標的索引與所選索引不匹配時， RegularIcon可能會處於活動狀態； 當索引匹配時， SolidIcon可能會處於活動狀態。

<div v-for="(project, i) in projects">
  <span :class="{ RegularIcon: i !== selectedIndex, SolidIcon: i === selectedIndex }"
        @click="selectedIndex = i"></span>
</div>

 new Vue({ el: '#app', data: () => ({ selectedIndex: -1, projects: [ {id: 1}, {id: 2}, {id: 3}, ] }), })

 <script src="https://unpkg.com/vue@2.5.17"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous"> <div id="app"> <div v-for="(project, i) in projects" :key="project.id"> <span class="fa-ghost" :class="{far: i !== selectedIndex, fas: i === selectedIndex}" @click="selectedIndex = i"></span> </div> </div>

Answer 2

嘗試使用

document.getElementById(projectId).classList.add("classToAdd");
document.getElementById(projectId).classList.remove("classToRemove");