函数中的JS函数未被调用

Question

我希望这是一个非常简单的问题。事实上，我觉得我还没弄明白这很傻。我在这里有一个代码示例：

http://jsfiddle.net/joeljoelbinks/pVSDL/

摘录：

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

这是我在一个网站上实现的扩展div设计的简化原型。除了在expand()或contract()函数内部不会调用lighten()和dark()函数外，其他一切都按设计进行。我尝试了多种方法从函数中调用它们，但都不起作用。请注意，我把它们留在那里只是为了向你表明，这是需要修复的。在扩展/收缩功能范围内，我如何让它们启动？它们的工作方式与我一开始编码的mouseover/mouseout事件绑定时相同，但不在其他函数中。如果我让它们执行alert()函数，那么它们可以在所有上下文中工作，但如果我试图用它们修改JQuery(this)，则不能。

额外的问题：还有，看看js的顶部：我如何将两个变量绑定到相同的事件，而不是当前代码中我必须分别绑定它们？我已经尝试过bind()和其他一些东西，但只有当我单独做它们时，我才能让它们绑定，这违反了DRY原则；)

Answer 1

您需要确保this指的是正确的东西：

darken.call(this);

而不是

darken();

this的值是在每次函数调用时确定的，因此您需要使用.call()来确保它是正确的。或者，您可以更改darken()和lighten()函数，使它们接受元素影响的参数。

编辑—至于"奖金"，如果没有其他函数来"序列化"对需要绑定到"点击"(或其他)的两个事件处理程序的调用，就无法做到这一点。这当然是可能的，但它的价值毋庸置疑。您总是可以只编写一个函数来调用两个有问题的函数(再次注意适当地显式传递this)。