JQuery的懸停和點擊事件

我有很多的人在頁面上的照片，我想通過顯示一個人的鼠標替代的照片，並有照片還原到默認的鼠標了。我還希望當有人點擊照片以查看他們的個人資料（顯示在側欄上）時顯示替代照片。當有人點擊不同的人時，默認的照片將出現給該人。我無法將點擊和懸停事件相結合來實現此目的。JQuery的懸停和點擊事件

這是我到目前爲止所。我在那裏參加派對，但是這不會將先前查看的個人資料圖片恢復爲默認照片。點擊不同的個人資料照片時，如何從先前查看的個人資料中刪除點擊事件？

$('.rollover').click(function() { 
     $(this).unbind('mouseout'); 
    }).mouseover(function() { 
      img_src = $(this).attr('src'); //grab original image 
      new_src = $(this).attr('rel'); //grab rollover image 
      $(this).attr('src', new_src); //swap images 
      $(this).attr('rel', img_src); //swap images 
    }).mouseout(function() { 
      $(this).attr('src', img_src); //swap images 
      $(this).attr('rel', new_src); //swap images 
    });

在此先感謝。

來源

2012-09-03 brett

這就是我最終做的工作，正如我想要的那樣工作。可能有一種方法來簡化這一點，我會接受建議。感謝那些回覆。

jQuery(document).ready(function($) { 

//rollover swap images with rel 
    var img_src = ""; 
    var new_src = ""; 

$('.rollover').click(function() { 

     if($(this).hasClass("clicked")) 
    { 
      //do nothing if this element has already been clicked 
    } 
    else 
    { 
     //Unbind the hover effect from this element 
     $(this).removeClass("rollover"); 
     $(this).unbind('mouseenter').unbind('mouseleave') 

     //Go through and find anything having 'clicked' class - 
     //in theory, there should only be one element that has the 'clicked' class at any given time. 
     $('.clicked').each(function(){ 
       $(this).removeClass("clicked"); 
       $(this).addClass("rollover"); 

       //Swap the images 
       img_src = $(this).attr('src'); //grab original image 
       new_src = $(this).attr('rel'); //grab rollover image 
       $(this).attr('src', new_src); //swap images 
       $(this).attr('rel', img_src); //swap images 

       //Rebind hover (since we unbound it back up there ^^) to this *specific* element. 
       //If you do $(".rollover") to rebind, it kills all the other existing binds and binds ONLY this element. 
       $(this).hover(function(){ 
         img_src = $(this).attr('src'); //grab original image 
         new_src = $(this).attr('rel'); //grab rollover image 
         $(this).attr('src', new_src); //swap images 
         $(this).attr('rel', img_src); //swap images 
         }); 
       }); 

     $(this).addClass("clicked"); 

    } 
}); 

$(".rollover").hover(function(){ 
     img_src = $(this).attr('src'); //grab original image 
     new_src = $(this).attr('rel'); //grab rollover image 
     $(this).attr('src', new_src); //swap images 
     $(this).attr('rel', img_src); //swap images 
    }); 

});

來源

2012-09-05 21:41:38 brett

您可以通過使用on方法綁定一個單擊處理。

$(document).on({ 
    mouseenter: function() { 
     img_src = $(this).attr('src'); 
     new_src = $(this).attr('rel'); 
     $(this).attr('src', new_src); 
     $(this).attr('rel', img_src); 
    }, 
    mouseleave: function() { 
     $(this).attr('src', img_src); 
     $(this).attr('rel', new_src); 
    }, 
    click: function() { 
    // ... 
    }, 
}, ".rollover");

來源

2012-09-03 03:16:59 undefined

感謝您的答覆，但這種缺少解除綁定事件。我用我的進步更新了我的問題。 – brett

rel屬性僅用於錨鏈接標籤。你應該嘗試一種替代方案。我創建了一個小提琴here。讓我們看看這是你在找什麼。

來源

2012-09-03 04:44:49

JQuery的懸停和點擊事件

回答

相關問題