javascript - 如何在点击后更改图像？

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; 我们正在切换变量的值。

编辑 1: 我编辑了上面的代码以使其完整 jQuery。

编辑 2: 这是一个plunkr

编辑 3: 我相信您的这部分代码无法正常工作:

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

因为 $('div.me') 是 undefined。确保该元素存在。如果您注释掉这一行，代码就可以工作了。修复该动画，您就可以开始了。如果它让您更轻松，请使用我的 plunkr。 ;)