jquery - 我如何将其转换为 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();
            })
    });
}

编辑

一些优化和修复

$.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;
}