4

我无法绕过这个...

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 而不是单击的那个？

4

1 回答 1

3

Your problem is that you have 2 maps, but both have the same name. The browser is applying each map to the first image with a matching map attribute. I changed the HTML to use two unique names for your maps. Here's a working version of your code.

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: (note- not Java)

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

Please also note that I condensed your script. You were applying the same actions to both selectors, so I simplified it to use both selectors. If you prefer it, your original JavaScript will still work. Here's a jsfiddle link showing this code working: http://jsfiddle.net/GzxQR/

Credit to @Brewal for suggesting $('a').closest('.wrap'); - this is simpler code and is less likely to break if you change your HTML.

于 2013-06-14T13:23:41.717 回答