1

我有一个我希望是一个非常简单的问题。事实上，我认为这很愚蠢，我还没有弄清楚。我在这里有一个我的代码示例：

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 原则；)

4

1 回答 1

4

您需要确保this指的是正确的事情：

darken.call(this);

代替

darken();

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

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

于 2012-11-29T00:50:00.437 回答