javascript - 单击更改图像，保留图像并在单击其他图像时删除

Question

对于交互式图片，我希望图像在悬停时发生变化，并在单击时保持悬停状态(参见此处的图片:http://labs.tageswoche.ch/grafik_osze)。对于悬停，我有这段代码:

  var sourceSwap = function () {
      var $this = $(this);
      var newSource = $this.data('alt-src');
      $this.data('alt-src', $this.attr('src'));
      $this.attr('src', newSource);
  }

  $(function() {
      $('img[data-alt-src]').each(function() { 
          new Image().src = $(this).data('alt-src'); 
      }).hover(sourceSwap, sourceSwap); 
  });

但我不知道如何调整这段代码，它也可以在点击时使用。如果点击另一张图片，则应再次显示原始图片(白色图片)。这样只有一张点击的图片是黑色的。感谢您的回答!

Answer 1

var sourceSwap = function () {
      var $this = $(this);
      if (!$this.hasClass('active')) {
         var newSource = $this.data('alt-src');
         $this.data('alt-src', $this.attr('src'));
         $this.attr('src', newSource);
      }
  }

var makeActive = function() {
   var $this = $(this);

   // bring the active back (if any) to the first state
   if($('img.active').length) {
      var newSource = $('img.active').data('alt-src');
      $('img.active').data('alt-src', $('img.active').attr('src'));
      $('img.active').attr('src', newSource);

      $('img.active').removeClass('active');
   }

   $this.toggleClass('active');
}


$(function() {
  $('img[data-alt-src]').each(function() { 
   new Image().src = $(this).data('alt-src'); 
  }).hover(sourceSwap, sourceSwap);

  $('img[data-alt-src]').on('click', makeActive);
});

好吧，我还没有测试过，但我希望你明白这一点