Question

使用 javascript 更改标签的 className

2018-10-29

51

javascript vue.js

我正在尝试创建一个项目列表，并且我希望用户选择其中一个作为默认项目（以便稍后与其他流程一起使用）。

我的问题是，我有一个项目列表，每个项目都有一个唯一的 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

除了 DOM 操作外，您还可以使用 Vue 的类绑定根据条件设置特定类：

<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/[email protected]"></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");