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

[ljsbwcwt]

==========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函数怎么共用，希望高手帮帮我，在此谢过了

[ljsbwcwt]

这是中间的函数体，意思是这段代码已经实现了lamp的功能，现在一个页面上不止一个lamp,我就不知道怎么调用了，还望大家悉心教导一下，感激不尽。。。

<script type="text/javascript">
    // 高亮效果
    var blockHighLight = (function(window, $, undefined){
        var markers = [];
        return function(boxCls, itemCls, sizeArr){
            var box = $(boxCls);
            itemCls = itemCls || "a";
            box.find(itemCls).each(function(i){
                var self = $(this);
                var arr,w,h,marker;
                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");
                }
                marker = $('<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(marker);
                self.mouseover(function(){
                    for(var i=0; i<markers.length; i++){
                        markers[i].show().css({"opacity":'0.2',"filter":"alpha(opacity=20)"});
                    }
                    marker.hide();
                });     
                markers.push(marker);
            });
    
            box.mouseout(function(){
                for(var i=0; i<markers.length; i++){
                    markers[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>

[ftiger]

一般是给出一个公共命名，然后在这个公共命名下面建立自己的命名空间，如jq,它返回的代码就是这样写的。

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

就是暴露在外面的变量和内部变量可以不一至，然后在这个变量下面建立自己的代码库。 多个lamp可以处理合用同一个公共命名空间。

[ftiger]

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

[ljsbwcwt]

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

[ftiger]

请换一种说法描述你的要求。

[functionsub]

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, $);

不知道这样明白了没有。

[nonocast]

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