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

我在小提琴上试过这个：

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'函数来处理它们

只是复制并粘贴自己检查出来：）

在同一元素上单击两次，然后在另一个元素上单击，将第一个元素置于“单击”状态

1 个答案: