JQuery hover and click event

Question

У меня есть несколько фотографий людей на странице, и я хочу отобразить альтернативную фотографию человека на мыши и вернуть фотографию по умолчанию по мыши. Я также хочу, чтобы альтернативная фотография отображалась, когда кто-то нажимал фотографию, чтобы увидеть их профиль (который появляется на боковой панели). По умолчанию для этого человека появится фотография по умолчанию, когда кто-то нажимает на другого человека. У меня возникли проблемы с объединением событий click и hover для достижения этого.

Вот что у меня есть. Я вечеринка там, однако это не возвращает ранее просматриваемое изображение профиля к его фотографии по умолчанию. Как удалить событие клика из ранее просматриваемого профиля при нажатии на другое изображение профиля?

$('.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 
    }); 

Заранее спасибо.

Answer 1

Вот что я в итоге сделал и работает так, как хотел. Возможно, есть способ упростить это, и я буду открыт для предложений. Спасибо тем, кто ответил.

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

}); 

Answer 2

Вы можете связать обработчик кликов с помощью метода 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"); 

Answer 3

Атрибут rel предназначен только для якорных и тегов ссылок. Вы должны попробовать альтернативу. Я создал скрипку here. Посмотрим, действительно ли это то, что вы ищете.