删除包含 javascript 的容器中的所有 类
Removing all classes in a container with javascript
我正在尝试删除父元素中的所有 classes,结构如下所示
<div id="middleCol">
<section class="toggleSection" id="step1" v-on:click="toggleStep($event)" ref="step1">
<small>Step 1</small>
<h5>Flight Details</h5>
</section>
<section class="toggleSection" id="step2" v-on:click="toggleStep($event)" ref="step2">
<small>Step 2</small>
<h5>Traveler Info</h5>
</section>
<section class="toggleSection" id="step3" v-on:click="toggleStep($event)" ref="step3" >
<small>Step 3</small>
<h5>Payment</h5>
</section>
</div>
基本上这些是选项卡,我只想一次将一个活动 class 应用于一个 div,我的计划是删除所有 class 然后添加活动 class 到使用事件单击的任何选项卡,但我收到一个错误,即其他子元素上的 className 属性 不存在,该函数用于添加 class 只是不删除它们,我已经看到了一些 jquery 解决方案,但我希望找到一个普通的解决方案
感谢任何帮助:)
这是我正在尝试使用的功能
function toggleActive(event){
let element = event.currentTarget
let parent = element.parentNode.children;
console.log(element)
console.log(parent)
for (let child in parent){
parent[child.value].className = ''
}
element.classList.add("toggleSectionActive");
}
尝试绑定 class 并对部分使用 v-for:
new Vue({
el: '#demo',
data(){
return {
toggled: 0,
sections: [
{id: 0, name: 'Step 1', desc: 'Flight Details'},
{id: 1, name: 'Step 2', desc: 'Traveler Info'},
{id: 2, name: 'Step 3', desc: 'Payment'}
]
}
},
methods: {
toggleStep(id){
this.toggled = id
}
}
})
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div id="middleCol">
<section :class="section.id === toggled && 'active'" v-for="section in sections" :key="section.id" @click="toggleStep(section.id)">
<small>{{ section.name }}</small>
<h5>{{ section.desc }}</h5>
</section>
</div>
</div>
我正在尝试删除父元素中的所有 classes,结构如下所示
<div id="middleCol">
<section class="toggleSection" id="step1" v-on:click="toggleStep($event)" ref="step1">
<small>Step 1</small>
<h5>Flight Details</h5>
</section>
<section class="toggleSection" id="step2" v-on:click="toggleStep($event)" ref="step2">
<small>Step 2</small>
<h5>Traveler Info</h5>
</section>
<section class="toggleSection" id="step3" v-on:click="toggleStep($event)" ref="step3" >
<small>Step 3</small>
<h5>Payment</h5>
</section>
</div>
基本上这些是选项卡,我只想一次将一个活动 class 应用于一个 div,我的计划是删除所有 class 然后添加活动 class 到使用事件单击的任何选项卡,但我收到一个错误,即其他子元素上的 className 属性 不存在,该函数用于添加 class 只是不删除它们,我已经看到了一些 jquery 解决方案,但我希望找到一个普通的解决方案
感谢任何帮助:)
这是我正在尝试使用的功能
function toggleActive(event){
let element = event.currentTarget
let parent = element.parentNode.children;
console.log(element)
console.log(parent)
for (let child in parent){
parent[child.value].className = ''
}
element.classList.add("toggleSectionActive");
}
尝试绑定 class 并对部分使用 v-for:
new Vue({
el: '#demo',
data(){
return {
toggled: 0,
sections: [
{id: 0, name: 'Step 1', desc: 'Flight Details'},
{id: 1, name: 'Step 2', desc: 'Traveler Info'},
{id: 2, name: 'Step 3', desc: 'Payment'}
]
}
},
methods: {
toggleStep(id){
this.toggled = id
}
}
})
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div id="middleCol">
<section :class="section.id === toggled && 'active'" v-for="section in sections" :key="section.id" @click="toggleStep(section.id)">
<small>{{ section.name }}</small>
<h5>{{ section.desc }}</h5>
</section>
</div>
</div>