Sekme etkinken, çocuk (torun) sınıfını değiştir

Question

Google'da ve bu forumda etrafa baktım ama ihtiyacım olanı bulamıyorum veya koduma nasıl uygulayacağımı bilmiyorum.

Yapmayı denediğim şey sekme seçildiğinde simgeleri değiştirmek (vurgulamaktır). Simgelerim için sprite img kullandım ve {{icon}} simge adlarının bulunduğu bir listedir.

Html:

<ul class="nav nav-icons" role ="tablist"> 
    {% for icon in icon_list1 %} 
    <li class="nav-item"> 
    <a href="#{{icon}}" role="tab" aria-controls="{{icon}}" data-toggle="pill" aria-expanded="false"> 
     <div class="icon-{{icon}}"></div> 
    </a> 
    </li> 
    {% endfor %} 
</ul> 

• farklı bölümleri için farklı icon_list ile sayfamda bu kodunu 3 kez var. ve sayfa aktif olması için her listedeki ilk öğeyi yüklenir ve işte li elem aktif div olduğunda (kırmızı simge)

JS

$(document).ready(function() { 
    $('.nav.nav-icons .nav-item:first-child').addClass('active'); 
    $('.nav-item').find('div').toggleClass(function(){ 
     var className = $(this).attr('class');   
     var classRed = className + '-red';   
     if ($(this).parents().is(".active")) {    
      return classRed ;    
     }else{  
      return className; 

     } 
    }); 
}); 

vurgulandığında isterim sınıf 'icon-name' ten 'icon-name-red' olarak değiştirilir ve başka bir sekme seçildiğinde, aynı şey ancak önceki div sınıfının 'icon-name' olarak değiştirileceği anlamına gelir. Şey, olayı eklemek için iki kez tıklamam gereken tıklama olayını eklediğimde.

Umarım birisi bana bu konuda yardımcı olabilir.

Teşekkür

Answer 1

Belki bu kimseye yardımcı olacak, benim sorunu çözmek için bir yol bulmuş etmedi.

$(document).ready(function() { 
//activate the first item in the list 
    $('.nav.nav-icons .nav-item:first-child').addClass('active'); 
    $('.nav-item.active').find("div").attr('class',function(i, v) { 
     return v.replace('-white', '-red'); 
    });   
}); 
//this code is for each icon_list 
$(function(){   
    $('.nav-item.list1').unbind('click'); 
    $('.nav-item.list1').on('click', 
    function(){  
     $(this).toggleClass('active');     
     if ($(this).hasClass('active')){ 
      $('.nav-item.list1 ').find("div").attr('class',function(i, v) { 
      return v.replace('-red', '-white'); 
      });    
      $(this).find("div").attr('class',function(i, v) { 
      return v.replace('-white', '-red'); 
      }); 
     } 
     $(this).toggleClass('active');  
    }); 

Sadece birinin daha iyi bir çözümü veya belki de benimkini geliştirmek için bazı fikirleri olduğunu umuyorum.