我怎么把它变成jQuery函数？

Question

我有这个javascript：

$('.step_1 li').click(function(event) {
  $(this).find('label').hide();
  $(this).find('input').focus();
});

$('.step_1 li input')
.focus(function(){
  $(this).prev('label').hide();
})
.blur(function(){
  if (!$(this).val()){
    $(this).prev('label').show();
  }
});

我希望能够简单地说$('.step_1').inputSwap()，以便我可以重复使用它。

那么创建像这样的jQuery函数是什么？ （我正在运行jQuery 1.6.2）

Answer 1

这就是你将它变成插件的方式。

$.fn.inputSwap = function(){
    return this.each(function(){
        $(this)
            .click(function(){
                $(this).find("label").hide();
                $(this).find('input').focus();
            }).find("input").focus(function(){
                $(this).prev('label').hide();
            }).blur(function(){
                $(this).prev('label').show();
            })
    });
}

修改

一些优化并修复了li

$.fn.inputSwap = function(){
    this.find('li').click(function(){
        var $li = $(this);
        $li.find("label").hide();
        $li.find('input').focus();
    }).find("input").focus(function(){
        $(this).prev('label').hide();
    }).blur(function(){
        $(this).prev('label').show();
    });
    return this;
}

Answer 2

考虑一下：

function inputSwap( clss ) {
    var j = $( clss );

    j.delegate( 'li', 'click', function () {
        $( this ).find( 'label' ).hide();
        $( this ).find( 'input' ).focus();
    });

    j.delegate( 'input', 'focus', function () {
        $( this ).prev( 'label' ).hide();  
    });

    j.delegate( 'input', 'blur', function () {
        $( this ).prev( 'label' ).toggle( !this.value );
    });
}

现场演示： http://jsfiddle.net/nbkcP/

使用delegate可确保更好的性能，因为您不会将任何点击/焦点/模糊处理程序直接绑定到相应的元素。相反，jQuery将只有一个“实时”处理程序绑定到每个.step_1元素。

Answer 3

$.fn.inputSwap = function(){
    return this.find('li').click(function(event) {
        $(this).find('label').hide().end().find('input').focus();
    }).find('input').focus(function(){
        $(this).prev('label').hide();
    }).blur(function(){
        if (!$(this).val()){
            $(this).prev('label').show();
        }
    });
};

用以下方式调用：

$('.step_1').inputSwap()