Toggle die Klasse eines anderen Elements in 'dies'

Ich habe einen Akkordeon-Code von W3Schools, aber ich möchte eine Klasse von icon <i> ersetzen. Wie kann ich switchClass() eines Elements innerhalb this auf diesen Code?Toggle die Klasse eines anderen Elements in 'dies'

-Code von W3Schools:

var acc = document.getElementsByClassName("course-row"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("unit-row-hide"); 
    } 
}

Mein HTML:

<div class="row-history"> 
    <div class="row course-row active"> 
     <div class="course-name col-md-4"> 
      <i class="fa fa-caret-right" aria-hidden="true"></i> 
      <a href="https://www.xxx.com.br/curso-teste-4">Curso Teste 4</a> 
     </div> 
     <div class="course-progress col-md-2"> 
      <div class="course-progress-bar-wrapper col-md-8"> 
       <div class="course-progress-bar">&nbsp;</div> 
      </div> 
      <div class="course-progress-percent col-md-4">100%</div> 
     </div> 
     <div class="course-remaining col-md-2">Completo</div> 
     <div class="course-timestamp col-md-2">21 horas atrás</div> 
     <div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div> 
    </div> <!-- .course-row --> 

    <div class="unit-row"> 

     <div class="row single-unit"> 
      <div class="unit-name col-md-4"> 
       <i class="fa fa-angle-double-right" aria-hidden="true"></i> 
       Curso Teste 4 - Unidade 3 
      </div> 
      <div class="unit-nbsp col-md-4">&nbsp;</div> 
      <div class="unit-timestamp col-md-2">21 horas atrás</div> 
      <div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div> 
     </div> 

    </div> <!-- .unit-row --> 
</div>

Ich brauche die Klasse fa-caret-right<i class="fa fa-caret-right" aria-hidden="true"></i>-fa-caret-down zu ersetzen, wenn das div kollabiert ist und zurück zu fa-caret-right, wenn es nicht kollabiert ist .

Quelle

2016-06-14 William

Also, das Problem ist, dass Sie nicht wissen, wie Sie einen Verweis auf dieses Element bekommen? –

@FelixKling, ja, ich muss das '' auf 'switchClass()', aber ich muss das gleiche Skript verwenden. – William

+0

Wenn es immer das erste Enkelkind ist, können Sie 'this.children [0] .children [0]' verwenden, um darauf zu verweisen. Zuverlässiger könnte ['querySelector'] sein (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). Es gibt grundsätzlich zwei Möglichkeiten, einen Verweis auf ein Element zu erhalten: Tree Traversal oder Search. –

Toggle die Klasse eines anderen Elements in 'dies'

Antwort

Verwandte Themen