Question

我在谷歌和这个论坛上环顾四周，但我找不到我需要的东西，或者我不知道如何将它应用到我的代码上。

我尝试完成的是在选中标签时更改图标（突出显示）。对于我使用精灵img的图标，{{icon}}是带有图标名称的列表。

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>

我在我的页面上有3次这个代码，不同的部分有不同的icon_list。我想在页面加载时，每个列表中的第一个项目都是活动的并突出显示（红色图标）

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;

        }
    });
 });

所以这里当li elem是活跃的div类从＆＃39; icon-name＆＃39;到＆＃39; icon-name-red＆＃39;当选择另一个标签时，同样的事情，但前一个div类要改回＆＃39; icon-name＆＃39;。问题是当我添加点击事件时，我必须点击两次才能发生。

我希望有人能帮助我。

由于

Answer 1

我确实找到了解决问题的方法，所以这可能对任何人都有帮助。

$( 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');    
   });

我希望有人有更好的解决方案，或者想要改进我的想法。

选项卡处于活动状态时更改子（孙）类

1 个答案: