如何使用JavaScript更改圖片？

Question

我有一個手風琴可以工作，一次只能打開一張圖像。 箭頭以向下開始，但是如果單擊它，圖標將變為向上。 我嘗試使用圖片制作圖片，因為我不喜歡可能的圖標。 問題是我的JavaScript適用於圖標，但是嘗試之后，我不知道如何將其用於圖像。 我嘗試了顯示的兩個圖像。 上下翻轉。

我的jQuery

jQuery(document).ready(function () {
    $(".flip").click(function () {
        $(".panel").not($(this).next(".panel").slideToggle("slow")).slideUp("slow");
        if($("i",this).hasClass('fa-chevron-circle-down')){
            $(".fa-chevron-circle-up").removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
            $("i",this).removeClass("fa-chevron-circle-down").addClass("fa-chevron-circle-up");
        }
        else{
            $("i",this).removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
        }
    });
});

和HTML

<div class="flip shadow-box col-xs-12 col-md-12 col-sm-12 arrow-icon-geschaeftsfelder">
    <i class="fa fa-chevron-circle-down"></i>
</div>

Answer 1

您可以使用javascript（用圖片標簽替換fa元素）來實現它，也可以使用純CSS解決和覆蓋：

  .fa.fa-chevron-circle-down {
      content: "";
      background: url(assets/img/down.png) center center no-repeat;
  }
  .fa.fa-chevron-circle-up {
      content: "";
      background: url(assets/img/up.png) center center no-repeat;
  }

小心圖像的尺寸。 fa項目的大小取決於字體大小。 您可以在CSS中指定寬度和高度，以避免出現問題。

注意：此解決方案無需編輯您的JavaScript代碼。