單擊后如何更改圖像？

Question

我已經滾動到圖片的底部鏈接。 這是箭頭指向下方的圖像。 當您第一次訪問該網站時，箭頭的圖像位於頁面底部，指向下方，當單擊它時，它會滾動到底部並最終到達頁面頂部。 當箭頭圖像位於頁面頂部時，我可以實現它變為指向上方的箭頭圖像嗎？

我已使用此代碼來實現圖像和向下滾動功能。

html的

<div class="arrow"><a href="#" class="scroll-down" address="true">
<img src="https://blog.com/hubfs/Icon/arrow.png"> 
</a></div>

可以將其替換為src =“ https://blog.com/hubfs/Icon/arrowup.png”>，並在圖像更改時添加功能以單擊它並滾動到頂部

.js文件

 $(function() {
    $('.scroll-down').click (function() {
      $('html, body').animate({scrollTop: $('div.me').offset().top }, 'fast');
      return false;
    });
});

Answer 1

    $(function () {
        var clickedImg = false;
        var imageElement = $('#img_button');

        $('.scroll-down').click(function () {
            $("html, body").animate({ scrollTop: 0 }, 600);
            clickedImg = !clickedImg;
            if (clickedImg) {
                imageElement.attr("src", 'arrow_down.png');
            } else {
                imageElement.attr("src", 'arrow_up.png');
            }
            return false;
        });
    });

使用變量clickedImg我們知道何時單擊圖像。 如果單擊，則箭頭向下，如果未單擊，則箭頭向上（在我的示例中）。

與此： clickedImg = ! clickedImg; clickedImg = ! clickedImg; 我們在切換變量的值。

編輯1：我編輯了上面的代碼以使其完整jQuery 。

編輯2：這是一個小矮人

編輯3：我相信您的代碼的這一部分無法正常工作：

$('html, body').animate({scrollTop: $('div.me').offset().top}, 'fast');

因為$('div.me')是undefined 。 確保該元素存在。 如果您注釋此行，則代碼有效。 修復該動畫，您便可以開始了。 如果方便，請使用我的plunkr。 ;）