2

我在这里有一个 jquery (UI) 应用程序，其中整个 JQuery 代码有点混乱，所以我开始思考如何以一种更花哨的方式来构建它……我在某处读到了一篇博客文章，“哎呀" - 以 java 的方式可以通过执行以下操作来实现：

function RangeSelector(product_id) {
    this.product_id = product_id;
    this.start_point = "#from_" + product_id;
    this.end_point = "#to_" + product_id;
}
RangeSelector.prototype.myFunction = function() { }

整个代码可以在这里找到。

我的范围选择器“类”应该包含两个 jquery ui datetimepickers，它们负责让用户为可以租用产品的商店选择日期时间范围

我目前遇到的问题如下：日期时间选择器获取回调函数（“unavailableFrom”，“unavailableTo”），我想做一些特定的事情，然后调用通用的“不可用”来运行。错误信息是：

TypeError: 'undefined' is not a function (evaluating 'this.unavailable(date)')

我用萤火虫看了看，似乎“这个”不是我的 RangeSelector 对象，而是关于 datetimepicker 工作的 HTML 元素。我的问题是：如何“不可用”访问此方法？

顺便说一句，我在这里告诉你整个故事，因为我不认为我在这里选择的结构是正确的方法。如果您有多个具有共同含义的 html 元素并且您想聚合它们，您如何处理这些事情？

4

2 回答 2

5

如果您需要设置this为不同的值，您可以使用它jQuery.proxy来执行此操作。（或者在支持 ES5 的环境中，您可以使用新Function#bind函数。）proxy接受用于 for 的函数和值this，并返回一个函数，该函数将调用this设置为该值的原始函数。

因此，例如，假设您有您的RangeSelector并且想要在特定实例上click触发：myFunction

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click($.proxy(r.myFunction, r));

现在，当r.myFunction被调用时，在调用中，this将是对该r对象的引用。（如果您需要知道单击了哪个 DOM 元素，请myFunction接受eventjQuery 传递它的参数，并使用event.target.）

为了完整起见，上述使用Function#bind（如果浏览器支持 ES5 功能，或者您已包含 ES5 shim [因为Function#bind是 shim-able]）：

var r = new RangeSelector(/* ...args...*/);
$("some_selector").click(r.myFunction.bind(r));

更多探索（在我的博客上）：

jQuery UI有点痛苦，因为它们没有给你datepicker对象，所以你无法访问. 你最好的选择可能是一个传递元素的闭包：onSelecteventevent.target

var r = new RangeSelector(/* ...args...*/);
$("some_selector")..datepicker({
    onSelect: function(dateText, inst) {
        return r.myFunction(dateText, inst, this);
    }
});

...myFunction接受dateText, inst, 和element参数的地方。

实例| 资源

这是有效的，因为我们分配给的函数是onSelect包含r变量的环境的闭包。

闭包经常被误解；FWIW，另一个博客条目：闭包并不复杂

于 2012-04-04T11:14:16.447 回答
0

关键字this正在改变您的范围，因此它在不同的地方并不像您期望的那样意味着相同的事情。我建议您在函数中明确传递您正在使用的元素，并直接引用该元素，而不是尝试使用this.

于 2012-04-04T11:21:33.930 回答