Javascript 在同一个元素上单击两次，然后在另一个元素上单击两次，将第一个元素带到；点击"；状态

我有一个交互式插图，您可以将鼠标悬停在元素上，然后单击它们，您可以看到一个弹出窗口，单击的元素变为黑色。它工作得相当好，但单击并悬停代码有一个问题。如果一行中单击同一元素两次，然后再单击另一个元素，则第一个元素将变为黑色。你自己试试看：

代码如下：

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

---

自己试一试：

我在小提琴上试一试：

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即可查看它（yorself:）

问题代码在于

.toggleClass（）

。双击元素时，将执行两次toggleClass。因为它是一个二进制函数，所以单击一两次会产生不同的结果。@Terry我将其更改为.addClass（），但它没有更改任何内容。您有什么建议吗？如果您可以创建一个最小的测试用例，例如代码片段或小提琴，那么会更容易提供帮助。@Terry我在帖子中添加了一个JSFIDLE不适合我，您可以分享整个提琴吗？我不确定我是否对这个问题解释得足够好。首先点击军队图片（变黑），然后再次点击军队图片（变白），然后点击货车（变黑）。如果你这样做，军队的照片也会变成黑色。这就是问题所在。