0

私はこれを過去1時間調査してきましたが、何が問題なのかわかりません。それぞれ独自の設定を持つ複数のインスタンスを可能にする単純なプラグインを作成したいと思います。私は JavaScript に精通していないため、オブジェクト/プロトタイプ メソッドを使用していません。

それぞれ独自の設定を持つ 2 つの異なる要素でこのプラグインを実行すると、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

何か案は？助けてくれてありがとう！

4

1 に答える 1

1

<img/> タグを含むアンカーの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>

更新されたフィドル - http://jsfiddle.net/yK9ad/2/

コンソールに次のように表示されました。

img
html
于 2014-06-13T03:18:51.927 に答える