简单的 jQuery 灯箱不适用于 Rails 应用程序。请帮忙？答案

【问题标题】：Simple jQuery lightbox is not working on Rails app. Help please?简单的 jQuery 灯箱不适用于 Rails 应用程序。请帮忙？
【发布时间】：2012-10-11 13:38:14
【问题描述】：

我想问一下为什么我的灯箱不工作。在我的 .html.erb 文件中，我有：

<a href="http://cdn.geekwire.com/wp-content/uploads/2011/10/patel-neil1-300x200.jpg?7794fe" class="thumbnail lightbox">
<img src="http://cdn.geekwire.com/wp-content/uploads/2011/10/patel-neil1-300x200.jpg?7794fe" alt="">
</a>

在我的 .css.scss 文件中，我有：

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: black url(loader.gif) no-repeat scroll center center;
}

#lightbox {
    position: fixed;
}

最后，对于我的 jQuery：

$(document).ready(function(){

    $('#toggleButton').click(function() {
        if ($('#experiment').is(':visible')) {
            $('#experiment').hide();
        } else {
            $('#experiment').show();
        }
    });

    alert('working!');

    $('a.lightbox').click(function(e) {
        // hide scrollbars!
        $('body').css('overflow-y', 'hidden');

        $('<div id="overlay"></div>')
            .css('top', $(document).scrollTop())
            .css('opacity', '0')
            .animate({'opacity': '0.5'}, 'slow')
            .appendTo('body');

        $('<div id="lightbox"></div>')
            .hide()
            .appendTo('body');

        $('<img>')
            .attr('src', $(this).attr('href'))
            .load(function() {
                positionLightboxImage();
            })
            .click(function() {
                removeLightbox();
            })
            .appendto('#lightbox');

        return false;
    });

    function positionLightboxImage() {
        var top = ($(window).height() - $('#lightbox').height()) / 2;
        var left = ($(window).width() - $('#lightbox').width()) / 2;
    $('#lightbox')
        .css({
            'top': top + $(document).scrollTop(),
            'left': left
        })
        .fadeIn();  
    }

    function removeLightbox() {
        $('#overlay, #lightbox')
            .fadeOut('slow', function() {
                $(this).remove();
                $('body').css('overflow-y', 'auto'); // show scrollbars!
            });
    }

});

我正在使用 Chrome 网络检查器来调试 Javascript 中的错误，现在我根本没有抛出任何错误，所以我看不出这里有什么问题？特别是因为我输入的 jQuery 警报确实弹出了，并且隐藏功能有效……我很难理解我的灯箱的纠正路径是什么。 :\ 任何帮助都非常感谢，谢谢！

【问题讨论】：

不清楚您的实际问题是什么？该图形只是您显示包含的 JS 的方式，对吗？那么你的代码到底出了什么问题？它是如何失败的？
现在，灯箱似乎根本不工作。当我单击包含在标记中的缩略图时，灯箱似乎没有激活。
您没有正确选择图像标签。删除和 >。应该是'$("img")'。此外，由于您将图像包装在 a 标记中，因此请确保您选择了正确的图像。缓存 '$("img")' 的结果，看看你得到了什么。希望对您有所帮助。
var $image = $('img').attr('src', $(this).attr('href'));然后只是 console.log($image);看看是否返回任何东西......
忽略我之前的回复。我明白你想做什么。但是图像没有被附加，有一个拼写错误 .appendto('#lightbox'); “appendTo”中的大写 t

标签： jquery ruby-on-rails erb sass

【解决方案1】：

看起来你的 jquery 有点弱

例如，你写这个的地方：

$('<div id="overlay"></div>')

正确的做法可能是

$('#overlay')

尝试按照上面的方法重做，看看会发生什么

【讨论】：

确实同意 RadBrad，就我而言，就我而言，你可能会做的最后一个解决方案可以提醒你的灯箱如何流动，因为你的代码不会太长，所以会有一个地方出现错误。
RadBrad 对我不起作用。我认为动态创建新元素的语法是我这样做的方式吗？并且只有在创建后选择它时才使用选择器方法...？
没想到吗？我从来没有添加过这样的元素，所以我不知道你在做什么。你确定语法有效吗，我从来没有见过这样做的。