更改圖像與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