如何使用 jquery click 函数创建带有“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'); 
});