函数内的 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() 和 darken() 函数外，一切都按设计工作。我尝试了多种方法从函数中调用它们，但它们不起作用。请注意，我将它们留在那里只是为了向您展示这就是需要解决的问题。在扩展/收缩功能中如何让它们触发？它们在绑定到我在开始时编码的鼠标悬停/鼠标悬停事件时工作，但不在其他函数中。如果我让它们执行一个 alert() 函数，那么它们可以在所有上下文中工作，但如果我试图用它们修改 JQuery(this) 则不会。

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

Answer 1

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

darken.call(this);

而不是

darken();

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

edit - 至于你的“奖励”，如果没有其他函数来“序列化”对两个事件处理程序的调用，你需要绑定到“click”（或任何）。这当然是可能的，但它的价值值得怀疑。您总是可以只编写一个函数来调用有问题的两个函数（再次注意适当地显式传递this）。