0

我正在尝试使用这段代码来使用页面上的单个链接来显示多个图像的图像标题。我已将代码从 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 很陌生，我已经用尽了所有我能想到的选项。有什么建议么？？

4

2 回答 2

2

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

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

祝你好运伴侣。

于 2013-07-31T03:22:30.780 回答
0

这是我想你想要实现的目标：

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;
});

旧的 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

于 2013-07-31T03:31:39.627 回答