调用$.each(）函数时上下文发生变化

Context changes on the call of $.each() function

本文关键字：上下文 变化 函数 each 调用      更新时间：2023-09-26

我使用Jquery$.each来获取属于特定类的所有元素，我想一个接一个地对每个元素调用一个函数。为了实现这一点，我调用了以下函数：

 var elements = $('.colorpickerHolder');
                    elements.each(self.ApplyColorPicker());

我可以在运行时上看到元素有三个元素，这是正确的。现在，当我呼唤自我的时候。ApplyColorPicker，我用$（this）引用每个当前元素。令人惊讶的是，$（this）不是当前元素。

我的代码在敲除框架下工作，两段代码都在viewModel下。并且在ApplyColorPicker$（this）内部成为我的viewModel。我不知道为什么。有什么理由吗？

以下是我的ApplyColorPicker代码，仅用于评论：

 self.ApplyColorPicker = function () {
           $(this).ColorPicker({
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $(this).css('backgroundColor', '#' + hex);
                }
            });
        };

将对函数本身的引用传递给each，而不是函数的求值结果。换句话说，使用self.ApplyColorPicker而不是self.ApplyColorPicker()。

 var elements = $('.colorpickerHolder');
 elements.each(self.ApplyColorPicker);

看起来您正在.each语句中调用ApplyColorPickers，这意味着它只被调用一次，并且将该函数的结果传递到.each，而不是对该函数的引用。这应该起作用：

elements.each(self.ApplyColorPicker); //Without the () after ApplyColorPicker

您需要做：

elements.each(self.ApplyColorPicker);

问题是self.ApplyColorPicker()实际上调用了该函数。您需要传递给$.each的是对该函数的引用。

相关文章：