Question

我有这段用coffeescript编写的代码（抱歉..）

_this = this
$('body').on 'click', '.open-modal', =>
    _this.modalId = $(this).attr('data-modal-id')
    _this.modalEl = $( '#' + _this.modalId )
    _this.modalAction = $(this).attr('data-action')

    _this.openModal()

是否有一种方法可以访问点击的元素('.open-modal')，同时为类而不是点击的元素保留this关键字。

基本上我想要实现这样的东西

$('body').on 'click', '.open-modal', (el) =>
    this.modalId = $(el).attr('data-modal-id')
    this.modalEl = $( '#' + this.modalId )
    this.modalAction = $(el).attr('data-action')

    this.openModal()

有办法怎么做？

Answer 1

如果您使用的是ECMAScript 6，则箭头函数语法（() => {}）会执行此操作，但您必须从事件对象中获取该元素。我认为CoffeeScript可能会将其() => {}语法转换为函数的ES5版本，但可能不会这样做（我认为这取决于您的编译器设置）。

$('body').on('click', '.open-modal', (evt) => {
    this.modalId = $(evt.target).attr('data-modal-id');
    this.modalEl = $('#' + this.modalId);
    this.modalAction = $(evt.target).attr('data-action');
});

如果你不能使用它，常见的模式是将this保存为self，然后在其他范围内使用它。这不依赖于任何特定的编译器帮助。

var self = this;
$('body').on('click', '.open-modal', function () {
    this.modalId = $(this).attr('data-modal-id')
    this.modalEl = $('#' + self.modalId)
    this.modalAction = $(this).attr('data-action')
});

最后，如果你真的想要它，你可以将回调包装在另一个根据需要设置的函数中。

$('body').on('click', '.open-modal', (function (self) {
    return function () { 
        (function (el) {
            this.modalId = $(el).attr('data-modal-id');
            this.modalEl = $('#' + this.modalId);
            this.modalAction = $(el).attr('data-action');
        }).call(self, this);
    };
})(this));

虽然这有点傻和矫枉过正。它使用自调用函数将其范围限定为self，返回一个函数，然后使用call包装另一个函数来指定this并将元素作为参数传递。

访问点击的元素和＆＃34;这个＆＃34;同一范围内的类引用

1 个答案: