How to manage elements with the same class in a Jquery method

Hi I'm using a Jquery method to highlight a Keycaps on a keyboard when click. When you click on the individually you get a border on that keycap. All areas of the map has the class "key" and others have the class "alpha" and "control".

Now what I want to do is be able to click all alphanumeric keys at the same time which a button event "balpha".

The problem in the code is that after using the "balpha" button all the areas act as one, and when pressing one keycap in the keyboard all the keys with the class "alpha" get highlighted, when they should work individually.

Here is a sample of the code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard Designer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<!-- hiligh jQuery implementation -->
<script>$(function() {
    $('.map').maphilight({
        fillColor: '008800'
    });

    <!-- function choose individual keycap -->
    $('.key').click(function(e) {
        e.preventDefault();
        var data = $(this).mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    });
    <!--function to choose alphanumerics-->
    $('#balpha').click(function(e) {
        e.preventDefault();
        var data = $('.alpha').mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $('.alpha').data('maphilight', data).trigger('alwaysOn.maphilight');
    });
});</script>
</head>
<body>
    <img src="http://i.imgur.com/YY2VAs8.png" width="980" height="292" alt="applekeyboard" class="map" usemap="#appleKeyboard">
        <map name="appleKeyboard">
        <!-- alphanumeric buttoms -->
        <area shape="rect" coords="61,58,98,95" href="#" alt="n1" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
        <area shape="rect" coords="104,58,141,95" href="#" alt="n2" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
        <area shape="rect" coords="147,58,184,95" href="#" alt="n3" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
        <area shape="rect" coords="190,58,227,95" href="#" alt="n4" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
    </map>
    <fieldset>
        <legend>keys group</legend>
            <button id="balpha" type="button" value="alpha" >Alphanumeric</button><br />
    </fieldset>   
</body>
</html>

Thanks for any advice that you could give me!

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.