OOOO
All geek questions in one place

JQuery image map area dynamic onclick

I can not get myself to get around this ...

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

Tags a are executed as necessary, but when a click on the image is clicked, it selects only the top div, and not the one that was clicked.

+4
source share
1 answer

Your problem is that you have 2 cards, but both have the same name. The browser applies each map to the first image with the corresponding map attribute. I changed the HTML to use two unique names for your maps. Here is the 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'); }); });

Also note that I have compressed your script. You applied the same actions to both selectors, so I have simplified the use of both selectors. If you prefer, your original JavaScript will still work. Here's a jsfiddle link showing this code: http://jsfiddle.net/GzxQR/

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

+3
source

Source: https://habr.com/ru/post/1486249/

More articles:


All Articles