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

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

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

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

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

1 个答案: