单击功能图片标题 Jquery 不工作

Question

我正在尝试使用这段代码通过页面上的单个链接显示多个图像的图像标题。我已将代码从 mouseenter 函数更新为 click 函数，并添加了一个新的标题切换，该切换应该显示与每个图像关联的任何标题。

JS

$(function () {
    $(".thumb").click(function () { //replaced to click 
        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
        });
        $(this).find('.caption').toggleClasss('hidden '); //added caption toggle
        $t.after($d).fadeTo("fast", 0.3);
        $d.click(function () { //replaced to click 
            $(this).fadeOut("fast", 0, function () {
                $(this).remove();
            }).siblings("img.thumb").fadeTo("fast", 1.0);
        });
    });
});

HTML

<img class="thumb" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQidl6KX2jRWNeCA6jT_TjWG7NlI3aRiB_AcDsA9Y5owS2cr9G6" alt="Nice painting">
<a class="caption" href="#">Click Me!</a>

CSS

.thumb {
    cursor: pointer;
}
.desc {
    cursor: pointer;
    position: absolute;
    color: #000;
    text-shadow: 0 0 5px 2px #fff;
    z-index: 1;
    text-align: center;
    padding: 10px 0;
}
.hidden {
    display:none;
}

下面是实际代码。 http://jsfiddle.net/hJMXa/

我对 Jquery 还是很陌生，我已经用尽了所有我能想到的选项。有什么建议吗？？

Answer 1

jsFiddle 什么都不做。 首先，如果你想让它在多个图像上工作，为什么你只有一个图像？ 其次，该页面上没有 DIV 元素，并且所有脚本都使用 $d 变量分配，该变量 = <DIV>。 第三次使用委托：

$('body').on('click', 'img', function () { //replaced to click 
    $(this).fadeOut("fast", 0, function () {
        $(this).remove();
    }).siblings("img.thumb").fadeTo("fast", 1.0);
});

祝你好运。

Answer 2

这是我想象中你想要达到的目标：

var img = $('img'),
    div = $(img.data('target')),
    caption = img.attr('caption'),
    someLink = $('a');

someLink.one('click', function() {
    div.append(caption).hide().slideDown();
    $(this).remove();
    return false;
});

old jsFiddle

更新

captionToggle.init({
    container: '.img_caption_container',
    loader: 'div.loader',
    link: 'a.link',
    slideDownFx: 'slideDown',
    slideUpFx: 'slideUp',
    showText: 'Hide Caption!',
    hideText: 'Show Caption!'
});

var captionToggle = {

    init: function(config) {

        $.each($(config.container), function() {
            var $this = $(this),
                $caption = $this.children('img').eq(0).attr('caption'),
                $loader = $this.children(config.loader).hide(),
                $link = $this.children(config.link);

            $link.on('click', function() {
                if ( $loader.text().length == 0 ) $loader.append($caption);

                if ( $(this).text() == 'Show Caption!' ) {
                    $loader[config.slideDownFx]();
                    $(this).text(config.showText);
                } else {
                    $(this).text(config.hideText);
                    $loader[config.slideUpFx]();
                }

                return false;
            });
        });
    }
}

JSFIDDLE