jquery 클릭 기능을 사용하여 'alt'텍스트로 이미지 캡션을 만드는 방법

Question

각 개별 이미지의 캡션으로 대체 텍스트를 표시하는 이미지 갤러리를 만들고 있습니다. 바로 지금 나는 mouseenter/mouseleave 함수를 사용하여 원하는 결과를 얻는다.

JS

$(function() { 
    $(".thumb").mouseenter(function() { 
     var $t = $(this); 
     var $d = $("<div>"); 
     $d.addClass("desc").text($t.attr("alt")).css({ 
      width: $t.width(), 
      height: $t.height() - 20, 
      top: $t.position().top 
     }); 
     $t.after($d).fadeTo("fast", 0.3); 
     $d.mouseleave(function() { 
      $(this).fadeOut("fast", 0, function() { 
       $(this).remove(); 
      }).siblings("img.thumb").fadeTo("fast", 1.0); 
     }); 
    }); 
}); 

HTML

<div> 
    <img class="thumb" src="myImage1" alt="caption"> 
</div> 
<div> 
    <img class="thumb" src="myImage2" alt="caption"> 
</div> 

는 여기에 내가 캡션 시각적으로 어떻게 보이는지의 관점에서 생각했던 것의 예입니다. http://jsfiddle.net/CTQvN/168/

는 기본적으로 나는 내가 다른 장치를 스마트 폰을 수용 할 수 있도록 대신 mouseenter 기능으로, 동시에 어딘가 버튼처럼 보이는 페이지의 링크를 클릭하여 여러 이미지의 캡션을 표시 할 수 있도록하려면 마우스없이. 지금까지 가지고있는 기능 부분을 업데이트하면서이 현재 스크립트의 시각적 미학을 유지하고 싶습니다. JavaScript에 익숙하지 않아 코드가 현재 가장 좋지 않다는 것을 알게되었습니다. 나는 제안에 대해 매우 개방적이며, 나는 이것이 작동하도록하는 방법을 매우 기꺼이 배워야한다. 건배!

Answer 1

여기에 하나의 가능성이다 :

EXAMPLE

$('.thumb').click(function() { 
    $(this).trigger('mouseenter'); 
}); 

아니면 버튼을 원하신다면 :

EXAMPLE

$('button').click(function() { 
    $('.thumb').trigger('mouseenter'); 
}); 

당신은 "mouseenter"와 "하는 MouseLeave"를 변경할 수 있습니다