Question

有没有办法以模块化的方式使用jQuery选择器：

var logo = $('.logo', function() {
    function show () {
        console.log('logo has appeared');
        $(this).addClass('logo-animated');
    };

    function hide() {
        console.log('logo has been removed');
    };
});

我希望能够将选择器分配给变量并在其中包含一些我可以从外部范围访问的函数。

注意，这是伪代码，我只是画了一张我如何看待它的照片。

var selector = $('.someclass',
    # here goes functions that I could access from outside;
);

更新

var parallax = function() {

    var images = ["http://localhost:8000/static/assets/images/hero-image-welcome.jpeg"];

    var selector =  $('.parallax-module');

    var reload = function() {
        console.log('reload')
    };

    $(selector).each(function(index) {
        var image = {};
        image.element = $(this);
        image.height = image.element.height();
        images.push(image);
        $(this).css('background-image', 'url(' + images[index] + ')');
    });

    return {
        images: images,
        reload: reload()
    }

}();

parallax.reload;
console.log(parallax.images[0])

// This goes without error, but isn't right;
var sParallax = $('.parallax-module');
sParallax.addClass('someClass');

// This would cause error;
parallax.addClass('someClass');

在这种情况下，我可以使用视差公共属性和方法，但我不能使用选择器（就像我在开始时所做的那样）而不创建新的链接。我知道我可以使用公共属性来访问选择器，但这不是我想要的方式。

Answer 1

您可以使用所需的选择器设置变量，然后只需将函数添加到该变量

var logo = $('.logo');
logo.show = function () {
  console.log('logo has appeared');
  $(this).addClass('logo-animated');
}

logo.hide = function () {
  console.log('logo has been removed');
}

logo.show();
logo.hide();

JSFIDDLE

Answer 2

您可以通过以下方式访问：

 logo.prevObject[0].show()//or hide()

Answer 3

我想我找到了方法，但它对我来说不合适，这是有效的想法：

var parallax = function() {

    var images = ["http://localhost:8000/static/assets/images/hero-image-welcome.jpeg"];

    var selector =  $('.parallax-module');

    var reload = function() {
        console.log('reload')
    };

    $(selector).each(function(index) {
        var image = {};
        image.element = $(this);
        image.height = image.element.height();
        images.push(image);
        $(this).css('background-image', 'url(' + images[index] + ')');
    });

    return {
        images: images,
        reload: reload()
    }

}().selector;

最后使用selector引用现在可以使用parallax变量作为DOM元素的简单链接，以及访问其中的函数。

使用jQuery选择器的模块化方式

3 个答案: