javascript - html 图像 map + jquery maphilight - 突出显示与数组中的值匹配的所有区域 id

Question

我有一个简单的 html 图像映射和一个包含状态名称的简单数组，我希望数组中的所有状态在 html 图像映射中突出显示。这是我的初始代码，我所有尝试获取 html 图像 map 的区域 id 的引用均未成功:

<div id="mapchart">

    <img src ="C:\Users\userA\Desktop\folder\usmap.png" border="0" alt="US Map" usemap ="#usmap" class="maphilight" />
    <map name="usmap">
    <area shape ="poly" id="CO" title="CO" alt="CO" coords ="160, 132, 152, 185, 225, 193, 229, 139" href ="javascript:alert('CO');" />
    <area shape ="poly" id="TX" title="CO" alt="TX" coords ="214, 199, 210, 261, 167, 258, 168, 262, 170, 262, 170, 267, 185, 281, 185, 285, 187, 287, 187, 290, 188, 294, 189, 296, 193, 299, 197, 300, 203, 304, 212, 294, 228, 294, 237, 309, 239, 315, 244, 323, 247, 325, 248, 331, 253, 335, 260, 344, 264, 346, 269, 347, 272, 350, 272, 332, 278,319, 315, 297, 319, 277, 311, 266, 311, 245, 300, 241, 275, 241, 262, 238, 246, 233, 247, 201, 214, 199" href ="javascript:alert('TX');" />

    </map>
    </div>

var states = ["TX", "CO"]; //initially i just want to highlight these 2 states

 $(function () {
           $.each(states, function (index, value) {

                $('.maphilight .TX').maphilight({ alwaysOn: true }); //this doesn't work; i've also tried several variations of this but i'm not able to reference the specific area that matches the corresponding value in the array.

            });

        });

有什么办法可以解决这个问题吗？

Answer 1

area 标记是 map 的子级，而不是 image 的子级。

您应该选择$('map[name=usmap] #TX')，而不是$('.maphilight .TX')