使用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函数时，我们知道源与前一个不同，所以我们将其恢复为原始源。

$(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>

我们可以更进一步，使用数据属性来存储这两个源，这样您就可以轻松地将其扩展到多个图像。

$(document).ready(function() {
  var img = $('#img');
  var prev = img[0].src;
  function toggle(i) {
    let src = i[0].src;
    let dsrc = i.data('switch-with');
    if(dsrc==src){
      i[0].src=prev;
    }else{
      i[0].src=dsrc;
      i[0].height="48";
    }
  }
  $('button').on('click', function() {
    toggle(img);
  })
})

<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" data-switch-with="https://pbs.twimg.com/profile_images/453956388851445761/8BKnRUXg_400x400.png">
<button>Toggle</button>