javascript - 为 jQuery 插件的每个实例设置默认设置的正确方法

Question

过去一个小时我一直在研究这个问题，但我似乎无法弄清楚出了什么问题。我想制作一个简单的插件，允许多个实例，每个实例都有自己的设置，我不太精通 javascript，所以我没有使用对象/原型(prototype)方法。

当我在两个不同的元素上运行此插件时，每个元素都有自己的设置，只有最后一个设置被使用，如 console.log 所示

这是我所拥有的:

jQuery.fn.lighthouse = function(config) {

    config = $.extend({}, jQuery.fn.lighthouse.config, config);

    config.openDuration = config.openDuration || config.duration;
    config.closeDuration = config.closeDuration || config.duration;

    return this.each(function() {
        var containers = $(this);

        $(containers).click(open);
        $(config.closeSelector).click(close);

        console.log(config.contentType);

        $(containers).each(function() {
            if (config.contentType === 'img' && $(this).prop('tagName') === 'A') {
                var href = $(this).href,
                    src = $(this).children('img').src;
                if (href !== src) {
                }
            }
        });


        // Needs the container object
        function open(link) {
            link.preventDefault();
            var current = {
                close: $(this).children(config.closeSelector),
                background: $(this).children(config.backgroundSelector),
                container: $(this),
                child: $(this).children(config.childSelector)
            };

            console.log($(current.child).is(':hidden'));
            if($(current.child).is(':hidden')) {
                link.preventDefault();
            }

            $(current.container).append('<div class="background"></div>').css({
                background: config.background,
                width: '100%',
                height: '100%',
                position: 'fixed',
                zIndex: '2',
                opacity: config.backgroundOpacity,
                display: 'none'
            }).fadeIn(config.secondaryDuration);

            $(current.child).css({
                position: 'fixed',
                display: 'none',
                width: '150px',
                height: '150px',
                left: current.container.offset().left,
                top: current.container.offset().top,
                zIndex: '3'
            }).fadeIn(config.secondaryDuration).animate({
                width: '100%',
                height: '100%',
                top: '0',
                left: '0'
            }, config.openDuration, function () {
                $(current.container).append('<a class=".close">X</a>').css({
                    background: 'white',
                    color: 'black',
                    width: '50px',
                    height: '50px',
                    lineHeight: '50px',
                    textAlign: 'center',
                    position: 'absolute',
                    top: '0',
                    right: '0',
                    display: 'none'
                }).fadeIn(config.secondaryDuration);
            });

        }

        // Needs the close object
        function close(link) {
            link.preventDefault();

            var current = {
                close: $(this),
                background: $(this).siblings(config.backgroundSelector),
                container: $(this).parent(config.containerSelector),
                child: $(current.containter).children(config.childSelector)
            };

            $(current.close).fadeOut(config.secondaryDuration).remove();
            $(current.close).fadeOut(config.secondaryDuration).remove();

            $(current.child).animate({
                height: current.containter.height(),
                width: current.containter.width(),
                top: current.containter.offset().top,
                left: current.containter.offset().left
            }, config.closeDuration, function () {
                $(current.child).animate({
                    opacity: '0',
                }, config.secondaryDuration).css({
                    display: 'none',
                    zIndex: 'auto'
                });
            });
        }
    });
}

jQuery.fn.lighthouse.config = {
    containerSelector: '.lighthouse',
    childSelector: 'div',
    closeSelector: '.close',
    backgroundSelector: '.background',
    captionSelector: '.caption',
    duration: 350,
    openDuration: null,
    closeDuration: null,
    secondaryDuration: 100,
    background: 'rgb(230, 230, 230)',
    backgroundOpacity: '0.7',
    contentType: 'img'
}

这就是我所说的:

$('.image').lighthouse();
$('.click').lighthouse({
    childSelector: '.site',
    contentType: 'html'
});

这是 jsfiddle:http://jsfiddle.net/yK9ad/

console.log 的正确输出应该是:

img
html

有什么想法吗？预先感谢您的帮助!

Answer 1

我认为您缺少包含 标记的 anchor 的 class 属性。请看下面

<a class="image" href="http://placehold.it/900x800&text=Image">
    <img src="http://placehold.it/300x200&text=Image" />
    <span class="caption">
        test
    </span>
</a>

更新的 fiddle - http://jsfiddle.net/yK9ad/2/

我可以在控制台中看到以下内容。

img
html