使用 $.each() 或 for 循环遍历区域元素

Question

在使用 Jquery 遍历区域元素时，有没有办法避免重复代码？还是使用纯 javascript 的更简单方法？ HTML 的 sn-p：

    <img id="img1" src="image.png" width="400px" height="400px" usemap="#area_click"title="click to shade different areas" />
<map name="area_click">
    <area href="" shape="poly" coords="33,149,53,151,49,183,45,205,27,197,29,171" alt="area1" >
    <area href="" shape="poly" coords="157,148,161,168,161,201,143,204,139,180,137,152" alt="area2" >
    <area href="" shape="poly" coords="51,144,55,126,57,114,41,88,32,112,32,140" alt="area3" >//...35 more areas follow...
</map>

我试过了……

1. 从地图子级创建数组。

   var kids=$("map[name*='area_click']").children();
   

2. 遍历数组。

   for (var k=0;k<kids.length;k++){
   kids[k].click(function(event){
       event.preventDefault();
       $("#" + AreaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);});}
   

我以为我遗漏了有关由 children() 创建的类数组对象的内容。 所以我尝试了......

1.从地图子级创建数组。然后使用 eq() 获取对数组中 DOM 元素的引用。

    var kids=$("map[name*='area_click']").children();
    var kidsArray = kids.eq();

2.遍历数组。

    for (var k=0;k<kidsArray.length;k++){
    kidsArray[k].click(function(event){
        event.preventDefault();
        $("#" + AreaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);});}

还尝试使用 $.each 和 find() 而不是 children()。但似乎 $.each() 无法消化区域元素。以下在 Firebug 控制台的 jquery.min 脚本中生成类型错误。

TypeError: t 未定义 ...nction(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11== =i){if("字符串"...

    var kids=$("map[name*='area_click']").find("area");
var k=0;
    $.each(kids.eq(k)).click(function(event){
        event.preventDefault();
        $("#" + areaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);
        k++;
    });

我确定我在尝试将数组的引用传递给 for 循环或 $.each() 时做错了，我只是不知道是什么。有什么帮助吗？还是我要把整个事情倒退？

Answer 1

貌似闭包变量k有问题，试试

kids.each(function (k) {
    $(this).click(function (event) {
        event.preventDefault();
        $("#" + AreaArray[k]).fadeToggle(500).fadeTo(300, opacityArray[k]);
    });
})

---

或者

kids.click(function (event) {
    event.preventDefault();
    var k = kids.index(this)
    $("#" + AreaArray[k]).fadeToggle(500).fadeTo(300, opacityArray[k]);
});