查看更新后的jsFiddle

Question

我刚开始创建自己的jquery插件。我仍然没有把握住他们的概念，并在插件中添加方法，我最近的尝试失败了，我不知道为什么。在这种情况下，我得到了我用来执行capFirst的常规代码，我想将其转换为插件..

HTML

<div id="contain">
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" />
</div>

原创jquery

function capitaliseFirstLetter(string)
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

$('#contain > input').keyup(function(){
    var $this = $(this);    
    $this.val(capitaliseFirstLetter($this.val()));
});

我尝试使用插件代码

    (function($) {

    $.fn.capFirst = function () {        
            $(this).keyup(function(){
                var $this = $(this);    
                $this.val(methods.capitaliseFirstLetter($this.val()));
            });      
    };

    var methods = function () {       
        capitaliseFirstLetter: function(inputValue) {
              return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$('#contain > input').capFirst();

jsfiddle：http://jsfiddle.net/ypWTd/118/

更新
jsfiddle的工作解决方案：http://jsfiddle.net/ypWTd/163/

Answer 1

问题是由以下部分引起的：

var methods = function () {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这实际上会导致语法错误。您似乎混淆了对象文字所需的语法与“类”（其中一个实例需要使用new运算符创建）所需的语法。如果你只是使它成为一个对象文字，而不是一个函数，它将起作用：

var methods = {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这是一个updated fiddle。

另请注意，在您的插件方法中，this已经是jQuery的一个实例，因此您无需再次将其传递给jQuery：

 $(this).keyup(function() {  //$(this)...
 this.keyup(function() { //Can just be this

<强>更新

另一种方式（使用function而不是对象文字）会是这样的：

$.fn.capFirst = function () {
    this.keyup(function(){
        var $this = $(this),  
            m = new methods(); //Create an instance of methods
        $this.val(m.capitaliseFirstLetter($this.val())); //Call the method
    });                  
};
var methods = function() {       
    this.capitaliseFirstLetter = function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这是该版本的example。

Answer 2

唯一明显的区别是你用于“this”的双$（$（））。你有没有尝试删除其中一个$（）？

第二：通常你应该“退回”以启用链接。

第三：通常你应该在插件中使用.each（）为多个元素选择器提供支持

this.each(function() {
   $(this).keyup(...);
})

第四：您试图在不使用“new”运算符的情况下访问类的方法。要么你应该做

var myObject = {method: function() {...}}

myObject.method();

或者你应该首先实例化对象

var myObject = function() {
    function method() {
    }
}

var myInstance = new myObject();
myInstance.method();

Answer 3

这就是你的插件应该是

的方式

jQuery.fn.capFirst = function () {
    $(this).keyup(function(){ 
        inputValue = $(this).val();
        inputValue = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
        $(this).val(inputValue);
    });                        
};

jQuery(function() {
    $('#contain > input').capFirst();   
});

查看更新后的jsFiddle

Answer 4

(function($) {

    $.fn.capFirst = function () {
        return this.keyup(function() { // Returning the elements to maintain chainability
            var $this = $(this);    
            $this.val(methods.capitaliseFirstLetter($this.val()));
        });                  
    };

    var methods = { // Made this an object/array instead of a function that didn´t return anything.
        capitaliseFirstLetter: function(inputValue) {
            return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$(document).ready(function() { // Selectors should not be used before the DOM is ready.
    $('#contain > input').hide().capFirst().show().css('color', 'blue'); // Demo. chainability
});

jQuery文档包含有关 Plugins/Authoring 的一些很好的信息。

您可以找到我的完整修改here。

jquery插件方法的概念

4 个答案:

这就是你的插件应该是

查看更新后的jsFiddle