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

Change image on click, keep image and remove if other image is clicked

本文关键字：图像 单击 其他 删除 保留      更新时间：2023-09-26

对于交互式图片，我希望图像在悬停时更改，并在单击时保持悬停状态（请参阅此处的图片：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); 
  });

但是我不知道如何adped此代码，它也可以在单击时工作。如果单击另一张图像，则应再次显示原始图像（白色图片）。因此，只有一张点击的图片是黑色的。感谢您的回答！

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

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

相关文章：