[英]JS function within function does not get called
I have what I hope is a very simple question. 我希望这是一个非常简单的问题。 In fact I think it's silly I haven't figured it out.
事实上,我认为这很愚蠢,我还没弄清楚。 I have an example of my code here:
我在这里有一个代码示例:
http://jsfiddle.net/joeljoelbinks/pVSDL/ http://jsfiddle.net/joeljoelbinks/pVSDL/
excerpt: 摘抄:
function lighten() {
jQuery(this).css('opacity', '0.5');
jQuery(this).html('DO IT!');
}
function darken() {
jQuery(this).css('opacity', '1');
jQuery(this).html('CLICK TO EXPAND');
}
function expand() {
jQuery(this).off('click', expand);
jQuery(this).off('mouseover', lighten);
jQuery(this).on('click', contract);
darken(); //this doesn't get called
jQuery(this).animate({width: '200px', height: '200px'}, 500);
}
function contract() {
jQuery(this).off('click', contract);
jQuery(this).on('mouseover', lighten);
jQuery(this).on('click', expand);
lighten(); //this doesn't get called
jQuery(this).animate({width: '100px', height: '100px'}, 250);
}
This is a simplified prototype of an expanding div design I am implementing on a website I am working on. 这是我正在开发的网站上实现的扩展div设计的简化原型。 Everything works as designed except the lighten() and darken() functions do not get called when inside the expand() or contract() functions.
一切都按设计工作,除了在expand()或contract()函数内部不会调用lighten()和darken()函数。 I have tried multiple ways to call them from within the functions but they don't work.
我尝试了多种方法从函数内调用它们但它们不起作用。 Notice that I left them there just to show you that that's what needs to be fixed.
请注意,我把它们留在那里只是为了告诉你这是需要修复的。 How do I get them to fire when within the expand/contract functions?
如何在扩展/合同功能中触发它们? They work as when bound to mouseover/mouseout events which I coded at the beginning, but not within the other function.
它们在绑定到鼠标悬停/鼠标输出事件时工作,我在开始时编码,但不在其他函数内。 If I make them execute an alert() function, then they work in all contexts but not if I am trying to modify JQuery(this) with them.
如果我让它们执行一个alert()函数,那么它们可以在所有上下文中工作,但如果我试图用它们修改JQuery(this)则不行。
Bonus question: also, look at the top of the js: how do I bind both variables to the same events as opposed to the current code where I have to bind them separately? 额外问题:另外,请查看js的顶部:如何将两个变量绑定到相同的事件而不是当前代码,我必须单独绑定它们? I have tried bind() and several other things but I can only get them to bind when I do them separately which is a violation of DRY principles ;)
我已经尝试过bind()和其他一些东西,但是当我单独执行它时,我只能让它们绑定,这违反了DRY原则;)
You need to make sure that this
refers to the right thing: 你需要确保
this
是指正确的事情:
darken.call(this);
instead of 代替
darken();
The value of this
is determined upon every function call, so you need to make sure that it's correct by using .call()
. 值
this
是在每个函数调用确定的,所以你需要确保它的正确使用.call()
Alternatively, you could change your darken()
and lighten()
functions so that they took a parameter for the element to affect. 或者,您可以更改
darken()
和lighten()
函数,以便它们为要影响的元素提供参数。
edit — as to your "bonus", you can't do that without some other function to "serialize" the calls to the two event handlers you need to bind to "click" (or whatever). 编辑 - 关于你的“奖金”,如果没有其他功能来“序列化”你需要绑定到“点击”(或其他)的两个事件处理程序的调用,你就不能这样做。 That's certainly possible, but it's questionably valuable.
这当然是可能的,但它有价值。 You could always just write a single function to call the two functions in question (again being careful to explicitly pass on
this
appropriately). 你总是可以编写一个函数来调用有问题的两个函数(再次注意要明确地传递
this
函数)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.