使用jQuery切换图像源

Question

我想做一些有趣的事情，例如，我在我的网站上有一个图像，当一个按钮被触发时，我想更改它，但当按钮再次被点击（或添加相同的img到它）时，我想将它恢复到原来的状态，并在事件被点击时一直重复这一操作。我怎样才能做到这一点呢？

这是我当前的Jquery，但它只对一次单击起作用

    $('#menu-btn').on({
        'click': function () {
            $('#div1').attr('src', 'images/card-light.png');
        }
    });

Html代码

<button id="menu-btn">click me</button>
<img id="div1 src="./images/card-dark.png">

资产

images/card-dark.png
images/card-light.png

Answer 1

在文档加载时，将图像源存储在变量中。在我们的示例中，它被称为prev。

在toggle函数内部，我们检查图像的源是否与加载时的源相等。如果是的话，我们将源转换为另一个图像。当源被更改并且我们再次调用toggle函数时，我们知道源与前一个不同，因此我们将其还原回原始源。

null

$(document).ready(function() {
  var img = $('#img');
  var prev = img[0].src;
  function toggle(img) {
    let src = img.src;
    if (src == prev) {
      img.src = "https://pbs.twimg.com/profile_images/453956388851445761/8BKnRUXg_400x400.png";
      img.height="48";
    } else {
      img.src = prev;
    }
  }
  $('button').on('click', function() {
    toggle(img[0]);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" height="48"></script>
<img id="img" src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
<button>Toggle</button>