Удаление всех классов в контейнере с помощью javascript

#javascript #css #vue.js #class

Вопрос:

Я пытаюсь удалить все классы внутри родительского элемента, структура выглядит следующим образом

 <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>

в основном это вкладки, и я хочу применять активный класс только к одному div за раз, мой план состоит в том, чтобы удалить все классы, а затем добавить активный класс на любую вкладку, на которую нажимается событие, но я получаю сообщение об ошибке, что свойство className для других дочерних элементов не существует, функция работает для добавления классов, просто чтобы не удалять их, я видел несколько решений 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");
}

1. Однако в структуре, которую вы показываете, нет классов. Было бы лучше показать пример того, с чего бы вы начали и чем бы хотели закончить, с кодом, который вы уже написали, чтобы попытаться достичь этого.

2. спасибо, я обновил фрагмент соответствующего кода шаблона vue, который я использую

3. если вы используете Vue, я бы предложил использовать привязку классов Vue и позволить Vue решать, какие классы использовать для каждого раздела, вместо того, чтобы изменять их вручную vuejs.org/v2/guide/class-and-style.html , они даже показывают пример isActive класса

Ответ №1:

Попробуйте привязать класс и использовать 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 amp;amp; 'active'" v-for="section in sections" :key="section.id" @click="toggleStep(section.id)">
      <small>{{ section.name }}</small>
      <h5>{{ section.desc }}</h5>
    </section>
  </div>
</div>