使用javascript更改标签的className
使用javascript更改标签的className
提问于 2018-10-30 04:56:24
我正在尝试创建一个项目列表，我希望用户选择其中一个项目作为默认项目(以便稍后与其他流程一起使用)。
我的问题是，我有一个项目列表，每个项目都有一个唯一的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回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-30 05:54:07
您可以不使用DOM操作，而是使用Vue's class binding根据条件设置特定的类：
<span :class="{ CLASS1: CONDITION1, CLASS2: CONDITION2, ... }">在您的示例中，绑定将为：
<span :class="{ RegularIcon: CONDITION, SolidIcon: !CONDITION }">...where 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>
Stack Overflow用户
发布于 2018-10-30 05:03:34
尝试使用
document.getElementById(projectId).classList.add("classToAdd");
document.getElementById(projectId).classList.remove("classToRemove");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53053678
复制相关文章
相似问题