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

单击功能图像标题Jquery无法正常工作

2 个答案: