Question

我有一些代码，部分代码如下所示，我多次调用以修改页面上的元素：

if ($('.el').length == 0)
{
    $('<div class="el active">Good job!</div>').hide().appendTo('body').fadeIn();
}
else
{
    $('.el').fadeOut(function()
    {
        $('.el').html('Good job!').addClass('active').fadeIn();
    });
}

由于我多次调用同一段代码（有时会有不同的消息和不同的类），我想这样做，以便我可以简单地执行以下操作：

$('.el').messager({
    message: 'Good job!',
    class: 'active'
});

如何将我拥有的内容转换为我需要的内容？

Answer 1

查找how to extend jquery。像这样的东西应该做的伎俩（我还没有测试过代码）：

$.fn.extend({
  messager:function(options){
    var self = this;
    self.fadeOut(function(){
      self.html(options.message).addClass(options.class).fadeIn();
    });
  }
});

在页面中加载jQuery后调用上述方法一次。然后，您可以按以下方式调用方法：

$('.el').messager({
  message: 'Good job!',
  class: 'active'
});

将代码转换为可重用对象

1 个答案: