0

我在 HTML 中有这段代码

<div class="details-content">
    <p class="biography user_fillable inline_editable" data-id="Biography"></p>
</div>

当用户单击该段落时，它将变为一个文本字段。它是通过插件完成的。

插件代码： 

(function ($) {
    $.fn.inlineeditor = function (callback) {

        var $txt = $('<input type="text" class="inline-editor-text"/>');

        return this.each(function () {
            var $this = $(this);

            $this.on('click', function () {
                var _txt = $txt.clone().val($this.text()).insertAfter(this);

                $this.hide();
                _txt.select()
                    .on('keydown', function (e) {
                        if (e.which == '13') {
                            $this.text(_txt.val()).show();
                            _txt.remove();
                            if (callback) {
                                callback($this.text());
                            }
                        } else if (e.which == '27') {
                            $this.show();
                            _txt.remove();
                            if (callback) {
                                callback(null);
                            }
                        }
                    }).on('blur', function (e) {
                        $this.show();
                        _txt.remove();
                        if (callback) {
                            callback(null);
                        }
                    });
            });
        });

    };
})(jQuery);

用法： 

<script>
    $(function(){

    var $inlineeditable = $('.inline_editable');

        $inlineeditable.inlineeditor(function (data) {
            var $this = $(this), id = $this.data('id');
            if (data != null) {
                alert(data);
                alert(id);
            }
        });

    });
</script>

我可以获取数据，但不能获取“this”对象。我想得到' this'对象，相当于：

<p class="biography user_fillable inline_editable" data-id="Biography"></p>

我正在做return this.each(function () {，但它似乎不起作用。

这是示例

4

2 回答 2

2

您需要this在调用回调时显式设置上下文。目前，由于您没有将函数作为对象的方法调用，因此this上下文默认为全局window对象。因此，$(this)在您的回调中变得等同于$(window)- 不完全是您需要的。

Function.call您应该使用或Function.apply接受this上下文作为第一个参数来调用回调，如下所示：

callback.call($this[0], $this.text());
callback.call($this[0], null);
于 2013-01-26T10:44:39.983 回答
1

很难解释你的问题；我假设您的问题不在于返回（现在您正在返回已调用插件的 jQuery 对象，这是一个很好的方法，因为它使您的插件调用可链接），而是this在传递给您的插件的回调中设置您的插件正在处理的 DOM 元素。这是通过使用callback.call(<value for this>, <first param>, <second param>, ...)代替来完成的callback(<first param>, <second param>, ...)。

于 2013-01-26T10:44:39.420 回答