jquery图像映射区域动态onclick

我想不起这件事了

HTML:

---

a

标记按要求执行，但单击图像贴图时，它只会突出显示顶部的div，而不是单击的div？？？

您的问题是您有两个贴图，但它们都具有相同的名称。浏览器将每个贴图应用到具有匹配贴图属性的第一个图像。我更改了HTML，为地图使用了两个唯一的名称。这是您的代码的工作版本

HTML:

还请注意，我压缩了你的脚本。您对两个选择器应用了相同的操作，因此我将其简化为使用两个选择器。如果您愿意，您的原始JavaScript仍然可以工作。下面是一个JSFIDLE链接，显示了这段代码的工作原理：

---

@Brewal建议

$（'a'）。最近（'wrap'）-这是更简单的代码，如果更改HTML，则不太可能出现中断。
JAVA！=JavaScript，仅供参考。您还可以使用
$（'a'）.closest（'.wrap'）
@tymeJV我觉得这应该出现在SO@mishik对如果有一种“新的闪光”模块就太好了。太好了，谢谢。。。这些div是动态生成的，将添加一个计数器。再次感谢。好了，计数器是一个很好的解决方法。
$（'.wrap'）。在（'click'，a，.plus'，function（）{$（this）.toggleClass（'hilight'）；}）甚至更好。
<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus" />
    <map name="plusminus">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus" />
    <map name="plusminus">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

$(function() { //run when the DOM is ready
    $('a').click(function() {
        $(this).parent().parent().toggleClass('hilight');
    });

    $('.plus').click(function() {
        $(this).parent().parent().toggleClass('hilight');
    });
});

<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus1" />
    <map name="plusminus1">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus2" />
    <map name="plusminus2">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

$(function() { //run when the DOM is ready
    $('a, .plus').click(function() {
        $(this).closest('.wrap').toggleClass('hilight');
    });
});