Question

我无法让我绕过这一个......

HTML：

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

jQuery的：

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

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

a代码会根据需要执行，但是当点击图片地图时，它只突出显示顶部div而不是单击的那个？

Answer 1

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

HTML：

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

JavaScript :(注意 - 不是Java）

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

请注意我缩写了你的脚本。您正在对两个选择器应用相同的操作，因此我将其简化为使用两个选择器。如果您愿意，原始的JavaScript仍然可以使用。这是一个显示此代码的jsfiddle链接：http://jsfiddle.net/GzxQR/

感谢@Brewal建议$('a').closest('.wrap'); - 这是更简单的代码，如果您更改HTML，则不太可能破解。

jquery图像映射区域动态onclick

1 个答案: