Layui初始化多个非固定ID选择器的模块。

前言

在封装layui部分插件时，我发现文档中并未描述，同时初始化多个同类型插件，故有此文。

正文

要实现初始化多个同类型插件有两种写法：一种是each，一种是map，下方代码是以layui调色板模块为示例。废话不多说，直接上代码。

代码

写法一：

$('.color-btn').each(function(){
   var _this = $(this);
   colorpicker.render({
          elem: this
          ,predefine: true
          ,done: function(color){
              _this.next().val(color);
      	  }
    });
});

写法二：

$('.color-btn').map(function(){
   var _this = $(this);
   colorpicker.render({
          elem: this
          ,predefine: true
          ,done: function(color){
              _this.next().val(color);
      	  }
    });
});

后记

你以为这就结束了？既然用的是layui，当然是遵循layui的开发规范啦。查看layui文档>底层方法>其他方法。

这就是第三种写法。

彩蛋

看到这里，其实这个功能早就实现了。然而本着探索精神，我还是仔细查看layui文档，终于在字里行间找到了第四种写法，直接上代码。

lay('.color-btn').each(function(){
   var _this = $(this);
   colorpicker.render({
          elem: this
          ,predefine: true
          ,done: function(color){
              _this.next().val(color);
      	  }
    });
});

这段代码藏在代码示例>日期和时间选择

借此我实例了调色板模块，这些写法都基于jq的循环遍历方法，再深挖一点，就是js的遍历，再次强调了基础知识的重要。

温馨提示

1.实例化插件时要先引入哦。
2.使用$(this)即时缓存，在回调中直接调用时，会调用方法体哦。