Question

我尝试使用精美的框来创建一个jQuery效果来包含我的内容，其中包含下面缩略图的大图像。我想要做的是当点击缩略图然后大图像更新时（参见RACE Twelve图像作为例子）。这很好但问题是当我去我网站上的另一个奇特的盒子（SEE RACE ONE盒子）然后该图像已被更新为最后点击的缩略图。

我认为这可能是事件冒泡但是防止违约没有帮助。

我对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（）在任何情况下被执行。

更改所有图像的Jquery缩略图库

1 个答案: