100分求解，请高手赐教，谢谢了

Question

==========html部分<div class="lamp">
         <a href="#" class="sublight pic1"><img src="ads/ad192.jpg" /></a>
            <a href="#" class="sublight pic2"><img src="ads/ad606.jpg" /></a>
            <a href="#" class="sublight pic3"><img src="ads/ad606_150.jpg" /></a>
            <a href="#" class="sublight pic4"><img src="ads/ad192_150.jpg" /></a>
            <a href="#" class="sublight pic5"><img src="ads/ad192_150_2.jpg" /></a>
            <a href="#" class="sublight pic6"><img src="ads/ad192_150_3.jpg" /></a>
        </div>==========JS部分<script type="text/javascript">
    var blockHighLight = (function(window, $, undefined){
          中间省略函数体
    })(this, $);
    
    blockHighLight(
        ".lamp", //父元素
        ".sublight", //子元素集
        [
            '192,450', //第一张图片的宽高
            '606,300', //第二张图片的宽高
            '606,150', //第三张图片的宽高
            '192,150', //第四张图片的宽高
            '192,150', //第五张图片的宽高
            '192,150'  //第六张图片的宽高
        ]
    ); 
</script>
==========现在说问题以上代表已经实现功能，如果一个页面上还有第二个lamp，JS部分应该怎么调用才好呢？
有lamp,lamp2,就是JS函数怎么共用，希望高手帮帮我，在此谢过了

Answer 1

如果我做，我会把highlight做成jquery plugin.
$('.lamp').highlight();
$('.lamp')返回的是class=lamp的一个array，然后plugin内部是对这个array forEach调用，逐个highlight

Answer 2

一般是给出一个公共命名，然后在这个公共命名下面建立自己的命名空间，如jq,它返回的代码就是这样写的。
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
就是暴露在外面的变量和内部变量可以不一至，然后在这个变量下面建立自己的代码库。
多个lamp可以处理合用同一个公共命名空间。

Answer 3

比如多个jq库，就可以简单修改一下导出window.jQuery_1_7  = jQuery;//lamp1导入1.7
(function($){
.......
})(jQuery_1_7);//lamp2导入1.9
(function($){
......
})(jQuery_1_9);

Answer 4

呵，JS我不懂，各位能否贴下具体代码，谢谢了！
希望function(window, $, undefined这个函数体只出现一次，在外面多个LAMP引用上帮文章不知道是否可以？

Answer 5

var blockHighLight = (function(window, $, undefined){
          中间省略函数体
    })(this, $);你还省略中间函数体，你问题就出在这个函数体里。。var blockHighLight = (function(window, $, undefined){
        var p ,c,arr;//这里声明的变量在下面函数体里被赋值的时候，会重复被赋值，并以最后一次赋值为准，所以就没办法构造出多个lamp，其实是构造出来了，只是自身的配置会被别的覆盖。建议这里除了声明一些常规配置外，不要将在实际return的函数中会用到的变量声明在这里
        return function(pdom,cdom,sizearr){
            p =dom,c = cdom,arr=sizearr;
            
        }
})(this, $);
改成这样var blockHighLight = (function(window, $, undefined){
        var config = {ver:'1.0',name:'blockHightLight',count:0};
        function blockHighLight(pdom,cdom,sizearr){
            var p ,c,arr;
            p =dom,c = cdom,arr=sizearr;
            config.count ++;
        }
        blockHighLight.version = config.ver;
        blockHighLight.name = config.name;
        return blockHighLight;
})(this, $);不知道这样明白了没有。

Answer 6

这是中间的函数体，意思是这段代码已经实现了lamp的功能，现在一个页面上不止一个lamp,我就不知道怎么调用了，还望大家悉心教导一下，感激不尽
<script type="text/javascript">
    // 高亮效果
    var blockHighLight = (function(window, $, undefined){
        var ers = [];
        return function(boxCls, itemCls, sizeArr){
            var box = $(boxCls);
            itemCls = itemCls || "a";
            box.find(itemCls).each(function(i){
                var self = $(this);
                var arr,w,h,er;
                if(sizeArr !== undefined){
                    arr = sizeArr[i].split(",");
                    w = arr[0];
                    h = arr[1];
                }else{
                    w = self.find("img").attr("width");
                    h = self.find("img").attr("height");
                }
                er = $('<div style="cursor:pointer;top:0;left:0;position:absolute;width:'+w+'px;height:'+h+'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></div>');
                self.append(er);
                self.mouseover(function(){
                    for(var i=0; i<ers.length; i++){
                        ers[i].show().css({"opacity":'0.2',"filter":"alpha(opacity=20)"});
                    }
                    er.hide();
                });     
                ers.push(er);
            });
    
            box.mouseout(function(){
                for(var i=0; i<ers.length; i++){
                    ers[i].css({"opacity":'0',"filter":"alpha(opacity=0)"});
                }
            })
        }
    })(this, $);
    
    blockHighLight(
        ".lamp", //父元素
        ".sublight", //子元素集
        [
            '192,450', //第一张图片的宽高
            '606,300', //第二张图片的宽高
            '606,150', //第三张图片的宽高
            '192,150', //第四张图片的宽高
            '192,150', //第五张图片的宽高
            '192,150'  //第六张图片的宽高
        ]
    ); 
    </script>
<div class="lamp">
            <a href="#" class="sublight pic1"><img src="ads/ad192.jpg" /></a>
            <a href="#" class="sublight pic2"><img src="ads/ad606.jpg" /></a>
            <a href="#" class="sublight pic3"><img src="ads/ad606_150.jpg" /></a>
            <a href="#" class="sublight pic4"><img src="ads/ad192_150.jpg" /></a>
            <a href="#" class="sublight pic5"><img src="ads/ad192_150_2.jpg" /></a>
            <a href="#" class="sublight pic6"><img src="ads/ad192_150_3.jpg" /></a>
        </div>
<div class="lamp22222222">
            <a href="#" class="sublight pic1"><img src="ads/ad192.jpg" /></a>
            <a href="#" class="sublight pic2"><img src="ads/ad606.jpg" /></a>
            <a href="#" class="sublight pic3"><img src="ads/ad606_150.jpg" /></a>
            <a href="#" class="sublight pic4"><img src="ads/ad192_150.jpg" /></a>
            <a href="#" class="sublight pic5"><img src="ads/ad192_150_2.jpg" /></a>
            <a href="#" class="sublight pic6"><img src="ads/ad192_150_3.jpg" /></a>
        </div>