如何使用jQuery click函数来创建具有“ALT”文字图片说明(How to create i

我创建一个图片库，显示alt文本作为标题为每个单独的图像。 现在我有一些使用的mouseenter /鼠标离开功能这个期望的结果。

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:

这里有一个可能性：

例

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

或者，如果你想要一个按钮：

例

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

文章来源: How to create image captions with 'alt' text using jquery click function