更改图像与jquery时，一个手风琴头更改

Question

我有一个手风琴设置常见问题，具有不断变化的背景图像。我现在试图向.ac-header添加一个向上或向下的箭头，具体取决于.ac-header的活动状态。这是我现在的代码：

<ul id="faqs-list" class="fd-accordion"> 
    <li> 
     <header class="ac-header"> 
      <h4>1. Question 1?</h4> 
      <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" /> 
     </header> 
     <div class="ac-content"> 
      <p>Answer 1</p> 
     </div> 
    </li> 
    <li> 
     <header class="ac-header"> 
      <h4>1. Question 2?</h4> 
      <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" /> 
     </header> 
     <div class="ac-content"> 
      <p>Answer 2</p> 
     </div> 
    </li> 
</ul> 



$(function(){ 
    $(document).ready(function() { 
    $(".ac-content").hide(); 

    $('.ac-header').on("click", function (e) { 
    $('.ac-header').not(this) 
       .removeClass("active") 
       .next(".ac-content") 
       .hide(); 

    $(this).toggleClass("active") 
     .next(".ac-content") 
     .toggle($(this).is(".active")); 
    }); 
}); 

寻找建议，应该在javascript中添加什么以更改图像“arrow-down.png”。谢谢！

Answer 1

试试这个：切换类活跃后，检查是否标头具有主动类或不和改变图像相应

$(document).ready(function() { 
     $(".ac-content").hide(); 

     $('.ac-header').on("click", function (e) { 
     $('.ac-header').not(this) 
        .removeClass("active") 
        .next(".ac-content") 
        .hide(); 

     $('.ac-header').find('img').attr('src','assets/images/arrow-down.png').attr('alt','down-arrow'); 

    $(this).toggleClass("active") 
     .next(".ac-content") 
     .toggle($(this).is(".active")); 

    if($(this).hasClass('active')) 
    { 
     $(this).find('img').attr('src','assets/images/arrow-right.png').attr('alt','right-arrow'); 
    } 

    }); 
}); 

DEMO