JQuery를 가리키고 클릭 이벤트가 발생했습니다.

Question

페이지에 많은 사람들의 사진이 있습니다. 마우스 위에 다른 사람의 사진을 표시하고 사진을 마우스로 이동할 때 기본으로 되돌리려합니다. 또한 다른 사용자가 사진을 클릭하여 프로필 (사이드 바에 표시)을 볼 때 대체 사진이 표시되기를 원합니다. 다른 사람을 클릭하면 그 사람의 기본 사진이 나타납니다. 이를 달성하기 위해 클릭 및 마우스 오버 이벤트를 결합하는 데 문제가 있습니다.

여기까지 제가 지금까지 있습니다. 나는 그곳에서 파티이지만, 이전에 본 프로필 사진을 기본 사진으로 되 돌리지는 않습니다. 다른 프로필 사진을 클릭하면 이전에 본 프로필에서 클릭 이벤트를 어떻게 제거합니까?

$('.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을 만들었습니다. 이것이 당신이 찾고있는 것인지 보자.