单击更改图像，保留图像，如果单击其他图像则删除

for an interactive picture i want the images to change on hover and the to keep the hover state if clicked (see the picture here: http://labs.tageswoche.ch/grafik_osze). For the hover i have this code:

对于交互式图片,我希望图像在悬停时改变,并且如果点击则保持悬停状态(参见图片: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); 
  });

But i dont know how to adpat this code, that it works also on click. If one clicks on another image the original (white picture) should be shown again. So that only one clicked picture is black. Thanks for your answers!

但我不知道如何adpat这个代码,它也适用于点击。如果单击另一个图像,则应再次显示原始图像(白色图像)。因此,只有一个点击的图片是黑色的。谢谢你的回答!

1 个解决方案

#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);
});

well i havent test it but i hope you got the point

好吧,我没有测试它,但我希望你明白了