Javascript jQuery照片网格没有达到预期效果

我正在创建一个照片网格，但效果不太好。我找到了这个教程，我正试图复制它的效果。现在照片出现了，它们似乎有一些

CSS

样式。但是，当我将鼠标悬停在照片上或单击它们时，什么都没有发生

CSS

#pg { 
    position: relative;
    height: 585px; 
    background: #000; 
}

#pg li { 
    position: relative; 
    list-style: none; 
    width: 175px; 
    height: 117px; 
    overflow: hidden; 
    float: left; 
    z-index: 2; 
    opacity: .3; 
}

#pg li.active { 
    opacity: 1; 
}

#pg li.selected { 
    opacity: 1; 
    z-index: 99999; 
    -moz-box-shadow: 0px 0px 10px #fff; 
    -webkit-box-shadow: 0px 0px 10px #fff; 
}

#pg li img { 
    display: block;
    width: 100%; 
}

#pg li p { 
    color: white;
    margin: 10px 0; 
    font-size: 12px; 
}

.thumbs li { 
    list-style: none; 
    float: left; 
    margin: 5px; 
    padding: 3px; 
    background: #eee; 
    -moz-box-shadow: 0 0 4px #444; 
    -webkit-box-shadow: 0 0 2px #000; 
}

.thumbs li a { }
.thumbs li img { display: block; }
.thumbs li a img { border: none;}

#cycle { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 333px; 
    padding: 3px; 
    background: #eee; 
    -moz-box-shadow: 0 0 2px #000; 
    -webkit-box-shadow: 0 0 2px #000;
}

#cycle li { 
    position: relative; 
    list-style: none; 
    margin: 0; 
    padding: 3px; 
    width: 500px; 
    height: 333px; 
    overflow: hidden; 
}

#cycle li div { 
    position: absolute; 
    bottom: 3px; 
    left: 3px; 
    padding: 3px; 
    width: 494px; 
    background: black; 
    color: white; 
    font-size: 12px; 
    opacity: .8; 
}

Javascript文件#1

(function($) {
    $.fn.jphotogrid = function(settings, callback) {
        settings = $.extend(true, {
            activeClass: 'active',
            selectedClass: 'selected',
            baseCSS: {},
            selectedCSS: {}
        }, settings);

        var url = settings.flickrbase + settings.feedapi + '?';
        var first = true;

        //Convert floats to absolute
        function toAbsolute(el){
            $(el).children().each(function(){
                var pos = $(this).position();
                $(this).data('ptop',Math.floor(Number(pos.top)) + 'px');
                $(this).data('pleft',Math.floor(Number(pos.left)) + 'px');
            }).each(function(){
                placeOriginal(this);
            });
        }

        function placeOriginal(el, animate, callback){
            var dtop = $(el).data('ptop');
            var dleft = $(el).data('pleft');
            var props = $.extend({
                top: dtop,
                left: dleft
            }, settings.baseCSS);
            if(animate){
                $(el).animate(props, 'slow', function(){
                    if($.isFunction(callback)) callback();
                });
            }
            else{
                $(el).css($.extend(props, {position: 'absolute'}));
            }
        }

        function hideSelected(callback){
            $container.find('.' + settings.selectedClass).each(function(){
                $(this).removeClass(settings.selectedClass);
                placeOriginal(this, true);
            });
            if($.isFunction(callback)) callback();
        }

        function select(el){
            hideSelected(function(){
                $(el).addClass('selected').removeClass('active');
                $(el).animate(settings.selectedCSS, 'slow');
            });
        }

        for(var key in settings.qstrings){
            if(!first)
                url += '&';
            url += key + '=' + settings.qstrings[key];
            first = false;
        }

        return $(this).each(function(){
            $container = $(this);
            $(this).css('position','relative');
            toAbsolute(this);

            $(this).children()
                .css('cursor', 'pointer')
                .hover(function(){
                    if(!$(this).hasClass(settings.selectedClass))
                        $(this).addClass(settings.activeClass);
                },function(){
                    $(this).removeClass(settings.activeClass);
                });
            $('.' + settings.activeClass).live('click', function(){             
                select(this);
            });
            $('.' + settings.selectedClass).live('click', function(){
                hideSelected();
            });

            $(this).find('div')
                .hover(function(){
                    $(this).css('opacity', 0);
                },function(){
                    $(this).css('opacity', .5);
                })
                .click(function(){
                    $(this).css('opacity', 0);
                    $li = $(this).parent();
                    $li.css("z-index", 99);
                    $li.animate({
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '400px'
                    }, 'slow');
                });
            });
    }
})(jQuery);

Javascript文件#2

$('#pg').jphotogrid({
    baseCSS: {
        width: '175px',
        height: '117px',
        padding: '0px'
    },
    selectedCSS: {
        top: '50px',
        left: '100px',
        width: '500px',
        height: '360px',
        padding: '10px'
    }
});

PHP

if(isset($_POST['answer_id'])) {
    $answer_id = $_POST['answer_id'];

    $get_pics = $db->prepare('
        SELECT location
        FROM pictures
        WHERE answer_id = ?
    '); 

    $get_pics->bindValue(1, $answer_id, PDO::PARAM_STR);
    $get_pics->execute();

    echo "<ul id='pg'>";

    while ($row = $get_pics->fetch(PDO::FETCH_ASSOC)) {     
        echo "<li>" . "<img src='".$row['location']."'/>" . "</td>";
    }
    echo "</ul>";
    echo "<input value='Done' id='cancel_task_pics' type='button' class='form_button' /> ";
}

现在，这个“额外的CSS”似乎应该被使用，但我发现在教程或实现中没有提到它。无论如何，我把它包括在我的style.css文件中，但因为我没有调用它的任何id或类，所以它显然做得不多。无论如何，这是我能为这个问题收集的最完整的信息量。这有点让我发疯。总之，在那堵代码墙之后，网格显示在里面有图片，但是当我悬停或单击任何图片时，没有出现悬停、活动或动画效果。非常感谢您的帮助。

我拍摄了演示页面（照片部分）和代码

正如您所想，问题在于

.live

，但仅仅使用on是不够的。代码需要将事件处理委托给某个不会消失的祖先。包含元素（我们已经有了它的引用）工作得很好

以下是变化：

        $container.on('click', '.' + settings.activeClass, function(){  
            select(this);
        });
        $container.on('click', '.' + settings.selectedClass, function(){
            hideSelected();
        });

---

您使用的JQuery版本是什么？该插件是为旧版本（1.4）构建的，并利用了新版本中不存在的API（尤其是

.live

）jquery@AdamvandenHoven啊，接得好。我使用的是1.10.2，所以我想我应该将

.live

替换为

.on

对吗？编辑我刚试着用

.on

上的

替换
.live
，但仍然没有效果哇，老兄，非常感谢你。我知道这不是一个容易解决的问题，我真的很欣赏这把出色的小提琴+1.谢谢你太棒了