javascript';这';问题:以编程方式隐藏jQuery聚光灯
我正在尝试扩展(非常好),以便可以通过编程方式调用“隐藏”行为 我已经将相关代码移动到一个javascript';这';问题:以编程方式隐藏jQuery聚光灯,javascript,jquery-plugins,Javascript,Jquery Plugins,我正在尝试扩展(非常好),以便可以通过编程方式调用“隐藏”行为 我已经将相关代码移动到一个hide()函数中,当从spotlight本身调用时,它可以正常工作。但当我试图从聚光灯之外调用它时,什么都没有发生。我已经检查过,spotlight.hide实际上被定义为键入函数,但调用它似乎没有任何作用 (function($) { $.fn.spotlight = function(options) { var hide = function() {
hide()
函数中,当从spotlight本身调用时,它可以正常工作。但当我试图从聚光灯之外调用它时,什么都没有发生。我已经检查过,spotlight.hide
实际上被定义为键入函数
,但调用它似乎没有任何作用
(function($) {
$.fn.spotlight = function(options) {
var hide = function() {
alert('hiding...'); /* never gets invoked when called from outside spotlight */
if(settings.animate){
spotlight.animate({opacity: 0}, settings.speed, settings.easing, function(){
if(currentPos == 'static') element.css('position', 'static');
element.css('z-index', '1');
$(this).remove();
// Trigger the onHide callback
settings.onHide.call(this);
});
} else {
spotlight.css('opacity', '0');
if(currentPos == 'static') element.css('position', 'static');
element.css('z-index', '1');
$(this).remove();
// Trigger the onHide callback
settings.onHide.call(this);
}
};
// Default settings
settings = $.extend({}, {
opacity: .5,
speed: 400,
color: '#333',
animate: true,
easing: '',
exitEvent: 'click',
onShow: function(){},
onHide: function(){}
}, options);
// Do a compatibility check
if(!jQuery.support.opacity) return false;
if($('#spotlight').size() == 0){
// Add the overlay div
$('body').append('<div id="spotlight"></div>');
// Get our elements
var element = $(this);
var spotlight = $('#spotlight');
// Set the CSS styles
spotlight.css({
'position':'fixed',
'background':settings.color,
'opacity':'0',
'top':'0px',
'left':'0px',
'height':'100%',
'width':'100%',
'z-index':'9998'
});
// Set element CSS
var currentPos = element.css('position');
if(currentPos == 'static'){
element.css({'position':'relative', 'z-index':'9999'});
} else {
element.css('z-index', '9999');
}
// Fade in the spotlight
if(settings.animate){
spotlight.animate({opacity: settings.opacity}, settings.speed, settings.easing, function(){
// Trigger the onShow callback
settings.onShow.call(this);
});
} else {
spotlight.css('opacity', settings.opacity);
// Trigger the onShow callback
settings.onShow.call(this);
}
// Set up click to close
spotlight.live(settings.exitEvent, hide);
}
// Returns the jQuery object to allow for chainability.
return this;
};
})(jQuery);
为了隐藏它,我做了:
spotlight.hide();
我很确定这涉及到一个范围或问题
更新:完整解决方案位于。尝试更改:
var hide = function() {
致:
var
定义父范围内函数或变量的范围,即它本质上是受保护的<另一方面,code>这个
将在父对象上显式地设置它,原型
,并使它可以公开访问。啊,的确很简单。在进行建议的编辑之后,我必须将内部调用更改为this.hide(),还必须将调用更改为remove(),以便它们显式地传入div,而不是依赖于此。已修复代码:。谢谢这是真的;抱歉没有在我最初的回答中指出这一点。很高兴它让你走上了正确的道路!:)
var hide = function() {
this.hide = function() {