如何在点击var ID时添加/删除类元素？

Question

我有一个手风琴用于FAQ页面。点击某个特定问题时，节箭头需要从右向下改变。所有其他人都需要默认回到正确的位置。我错过了什么让这个工作？

  <dd id="1" class="accordion-navigation"> 
       <i class="fa fa-chevron-right"></i> <a class="faq-toggle" href="#faq1">How can I plan my Wedding at Mayan Resorts?</a> 
       <div id="faq1" class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       </div> 
      </dd> 

      <dd id="2" class="accordion-navigation"> 
       <i class="fa fa-chevron-right"></i> <a class="faq-toggle" href="#faq2">Do you offer a service to plan the event start to finish?</a> 
       <div id="faq2" class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       </div> 
      </dd> 



$('.accordion-navigation').click(function() { 
     var id = $(this).attr('id'); 

       if ($(id).hasClass('active')) { 
         $(id).find('i').removeClass('fa-chevron-right'); 
         $(id).find('i').addClass('fa-chevron-down'); 
       } 
       else if (!($('.accordion-navigation').hasClass('active'))) { 
         $('.accordion-navigation').find('i').addClass('fa-chevron-right'); 
         $('.accordion-navigation').find('i').removeClass('fa-chevron-down'); 
       } 
}); 

Answer 1

不知道到底为什么它不工作，但我打定自己的解决方案 - CSS和JS组合

http://jsfiddle.net/95rzLepo/

$(document).on('click', '.faq-toggle' ,function (e) { 
    if($(this).prev().hasClass('fa-chevron-down')) { 
     $(this).prev().removeClass('fa-chevron-down'); 
     $(this).prev().addClass('fa-chevron-right'); 
    } else { 
     $(this).parents('body').find('.fa.fa-chevron-down').each(function (e) { 
      $(this).removeClass('fa-chevron-down'); 
      $(this).addClass('fa-chevron-right'); 
     }); 

     $(this).prev().removeClass('fa-chevron-right'); 
     $(this).prev().addClass('fa-chevron-down'); 
    } 
}); 

Answer 2

使用的this和toggleClass您的实例，你应该能够做到这一点在短短的几行：

$('.accordion-navigation').click(function() { 
    //Remove from all 
    $('.accordion-navigation i').removeClass("fa-chevron-down").addClass("fa-chevron-right");  

    //Add to current 
    $("i", this).toggleClass("fa-chevron-right fa-chevron-down"); 
});