Question

我在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 () {，但似乎没有用。

Here is the sample

Answer 1

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

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

callback.call($this[0], $this.text());
callback.call($this[0], null);

Answer 2

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

如何在jQuery插件上返回自己？

2 个答案: