使用jQuery選擇

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; 
); 

UPDATE

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 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元素的簡單鏈接，以及訪問其中的函數。

Answer 2

您可以只設置變量與你想要的選擇，然後只需添加函數變量

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 3

您可以通過這個訪問：

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