javascript - 在同一个元素上单击两次，然后在另一个元素上使第一个元素进入 "clicked"状态

Question

我有一个交互式插图，您可以将鼠标悬停在元素上，然后如果您单击它们，您可以看到一个弹出窗口，并且单击的元素变为黑色。它工作得很好，但是点击和悬停代码有问题。如果连续两次单击同一元素然后单击另一个元素，则第一个元素会变黑。自己试试:http://labs.tageswoche.ch/grafik_osze

代码如下:

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

亲自尝试:http://jsfiddle.net/8wtvvka5/

Answer 1

我在 fiddle 上试过这个:

function swap(e)
{
    var src = e.attr('src');
    var active = e.hasClass('active');

    var dark =  src.indexOf('_h.png', src.length - '_h.png'.length) !== -1;
    e.attr('data-src-dark', dark); 

    if (active || e.attr('data-src-dark') == true) return;

    e.attr('src', e.attr('data-alt-src'));
    e.attr('data-alt-src', src); 

    return active;
}

var sourceSwap = function () 
{
      if (!$(this).hasClass('active')) 
      {
           swap($(this)); 
      }
};

var makeActive = function() 
{
     var active = $(this).hasClass('active');

     $('img.active').each(function()
     {                          
         $(this).removeClass('active'); swap($(this)); 
     });

     if (active) $(this).removeClass('active'); 
     else $(this).addClass('active');

     swap($(this)); 
 }

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

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

$('img.active') 是一组完整的元素，因此您应该使用 'each' 函数来处理所有元素

只需复制并粘贴到 fiddle 中自己检查一下 :)