在同一元素上单击两次，然后在另一个元素上单击两次，使第一个元素进入“单击”状态

clicking twice on the same element and then on another element brings the first elment to the "clicked" state

本文关键字：单击 元素 两次 状态 然后 另一个 第一个      更新时间：2023-09-26

我有一个交互式插图，您可以将鼠标悬停在元素上，然后如果您单击它们，您会看到一个弹出窗口，单击的元素会变黑。它工作得很好，但是单击和悬停代码存在问题。如果连续单击同一元素两次，然后在另一个元素上单击，则第一个元素将变为黑色。自己尝试：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/

我在小提琴上试过这个：

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

只需复制并粘贴以摆弄自己

检查一下:)
相关文章：