Question

我试图通过Tim Motto http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/修改SuperBox，并希望能够将变量传递给脚本

将变量传递给使用以下语法的jQuery脚本的方法是什么？（来自html的代码）：

<script src="js/superbox.js"></script>
<script>
    $(function() {
    // Call SuperBox
    $('.superbox').SuperBox();
    });
</script>

superbox.js的内容：

(function($) {

    $.fn.SuperBox = function(options) {

    var superbox      = $('<div class="superbox-show"></div>');
    var superboxclose = $('<div class="superbox-close"></div>');

    superbox.append(superboxclose);

    return this.each(function() {

        $('.superbox-list').click(function() {

        if($('.superbox-current-img').css('opacity') == 0) {
            $('.superbox-current-img').animate({opacity: 1});
        }

        if ($(this).next().hasClass('superbox-show')) {
            superbox.toggle();
        } else {
            superbox.insertAfter(this).css({display: "block", "max-width": "94.6%"});
        }

        $('html, body').animate({
            scrollTop:superbox.position().top - currentimg.width()
        }, 'medium');

        });

        $('.superbox').on('click', '.superbox-close', function() {
            $('.superbox-show').slideUp();
        });

    });
    };
})(jQuery);

按照规定，当用户点击页面上的图片时，它会打开一个类似于Google图片搜索工作方式的div。我希望它打开一个div但是传递一些数据以进行AJAX调用。在我的HTML中，我有一个锚标记：

<a href="#" data-id="13065">

并修改了js文件，如下所示：

(function($) {

    $.fn.SuperBox = function(options) {

        var id            = $(this).data('id'); <!-- added -->
        alert(id);                              <!-- added -->
        var superbox      = $('<div class="superbox-show"></div>');
        var superboxclose = $('<div class="superbox-close"></div>');

        superbox.append(superboxclose);

        return this.each(function() {
            var id            = $(this).data('id');  <!-- added -->
            alert(id);                               <!-- added -->

            $('.superbox-list').click(function() {
                if($('.superbox-current-img').css('opacity') == 0) {
                    $('.superbox-current-img').animate({opacity: 1});
                }
    .....
    }
}

但是，测试data-id是否传递并定义，警报框在任一实例中都是空的。我做错了什么？

修订

为了简洁起见，我遗漏了一些DOM。从原型：

<div class="wrapper">
    <div class="superbox">
        <div class="superbox-list">
                <img blah, blah >
        </div>
        ...
    </div>
</div>

点击div class="superbox-list"中div class="superbox-list"内的图片，然后点击jQuery。

将变量传递给jQuery SuperBox

0 个答案: