jQuery缩略图库更改所有图像

Question

我试图使用花哨的盒子创建一个jQuery效果来包含我的内容，并且在其中是下面带有缩略图的大图像。 我试图实现的是单击缩略图然后更新大图像（请参阅RACE十二张图像作为示例）。 这可以正常工作，但问题是当我转到网站上的其他花式框（“看到一个框”）时，该图像已更新为上次单击的缩略图。

我以为这可能是事件冒泡，但阻止默认设置并没有帮助。

我对jQuery非常陌生，并且知道这是我正在做的愚蠢的事情。

任何建议将不胜感激？ 谢谢 ：）

页面的实时版本： http : //www.goodwood.co.uk/members-meeting/the-races.aspx

jQuery的jsfiddle： http ： //jsfiddle.net/greenhulk01/JXqzL/

(function ($) {
    $(document).ready(function () {
        $('.races-thumbnail').live("click", function (e) {
            $('.races-main-image').hide();
            $('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
            var i = $('<img />').attr('src', this.href).load(function () {
                $('.races-main-image').attr('src', i.attr('src'));
                $('.races-image-wrap').css('background-image', 'none');
                $('.races-main-image').fadeIn();
            });
            return false;
            e.preventDefault();
        });

        $(".races-image-wrap img").toggle(function () { //fired the first time
            $(".races-pop-info").show();
            $(this).animate({
                width: "259px",
                height: "349px"
            });
        }, function () { // fired the second time 
            $(".races-pop-info").hide();
            $('.races-main-image').animate({
                width: "720px",
                height: "970px"
            });
        });

        $('#fancybox-overlay, #fancybox-close').live("click", function () {
            $(".races-pop-info").show();
            $(".races-main-image").animate({
                width: "259px",
                height: "349px"
            });
        });
    });
})(jQuery);

Answer 1

$（'。races-main-image'）将选择该类的所有元素，甚至是当前不可见的元素。

您可以根据以下代码选择最接近所单击元素的“ .races-main-image”（当放置在click事件处理程序中时）

$('.races-main-image', $(e.target).closest('.races-fancy-box'))

因此，您的新代码应如下所示：

$('.races-thumbnail').live("click", function (e) {
    var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
    var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
    racesmainimage.hide();
    racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
    var i = $('<img />').attr('src', this.href).load(function () {
        racesmainimage.attr('src', i.attr('src'));
        racesimagewrap.css('background-image', 'none');
        racesmainimage.fadeIn();
    });
    return false;
});

我也删除了您的'e.preventDefault（）;'。 返回false； 包括该内容，并且在任何情况下都阻止e.preventDefault（）的执行。