Question

我有这个自定义Jquery插件只是为了在输入中附加文本

<input id="txtName" value="My name is " />

<button id="btnGetData">Say what?</button>

这是来自我的插件

$.fn.AppendMe = function(strToAppnd)
{
    var newTxt = this.val() + strToAppnd;
    this.val(newTxt);

    function GetData()
    {    
        return newTxt;
    }
}

$(document).ready(function(){
    var finalForm = $('#txtName').AppendMe('Enteng');

    $('#btnGetData').click(function(e)
        {
            e.preventDefault();

            var result = finalForm.GetData();

            alert(result);
        });
});

我希望得到结果。如何从实例化的插件中提取公共方法？

我想在点击按钮时提醒结果

Click here for fiddle

Answer 1

或许只需返回newTxt。

$.fn.AppendMe = function(strToAppnd)
{
    var newTxt = this.val() + strToAppnd;
    this.val(newTxt);

    return newTxt;
}

...

var finalForm = $('#txtName').AppendMe('Enteng'); // Actually contains the whole string from the input

Fiddle

Answer 2

您的插件需要返回值。

由于您正在调用.GetData()方法，我假设您要使用.GetData()方法返回对象：

$.fn.AppendMe = function(strToAppnd)
{
    var newTxt = this.val() + strToAppnd;
    this.val(newTxt);
    return {
        GetData: function(){
            return newTxt;   
        }
    }
}

注意：您的插件未实例化。你的插件是一种方法，方法没有被实例化。

JSFiddle

Answer 3

关于你的代码的几个问题，在答案之前：

您应该仅为设计为构造函数的函数保留首字母。
你的插件应该返回jQuery对象，以便它仍然是可链接的。

这是一个有效的解决方案：

$.fn.appendMe = function(strToAppnd)
{
    var newTxt = this.val() + strToAppnd;
    this.val(newTxt);

    this.getData = function getData()
    {    
        return newTxt;
    }
    return this;
}

$(document).ready(function (){
    var finalForm = $('#txtName').appendMe('Enteng');

    $('#btnGetData').click(function (e)
        {
            e.preventDefault();

            var result = finalForm.getData();

            alert(result);
        });
});

JSFiddle updated

Answer 4

jQuery插件应该返回当前上下文（当前的jQuery集合）以支持chaining。你应该minimize the plugin footprint。因此，我不建议在GetData命名空间中使用额外的$.fn函数。

我建议像这样编写插件：

$.fn.AppendMe = function(strToAppnd)
{
    var newTxt = this.val() + strToAppnd;
    this.val(newTxt);
    // return the jQuery collection to support chaining
    return this;
}

现在你可以使用这样的插件：

$(document).ready(function(){
    var $finalForm = $('#txtName').AppendMe('Enteng');

    $('#btnGetData').click(function(e)
        {
            e.preventDefault();

            var result = $finalForm.val();

            alert(result);
        });
});

在自定义Jquery插件中获取数据

4 个答案: