Question

有没有办法避免在使用Jquery迭代区域元素时重复代码？或者使用普通的javascript更简单的方法？ HTML的片段：

    <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>

我试过......

从地图子项创建数组。

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

循环遍历数组。

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未定义 ...（e）{var t，n =“”，r = 0，i = e.nodeType; if（i）{if（1 === i || 9 === i || 11 == = 1）{如果（ “串” ...

    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]);
});

使用$ .each（）或for循环遍历区域元素

1 个答案: