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()函数，以便它们为要素影响的元素提供参数。

编辑 - 至于你的“奖金”，如果没有其他功能来“序列化”你需要绑定到“点击”的两个事件处理程序的调用，你就不能这样做（或者随你）。这当然是可能的，但它有价值。您可以随时编写一个函数来调用有问题的两个函数（再次注意明确地传递this）。

函数内的JS函数不会被调用

1 个答案: