Vote count:
0
Hi im using a Jquery method to highligh KeyCaps on a keyboard when click. When you click on them 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 al alphanumeric keys at the same time with 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://ift.tt/1q8JMjW"></script>
<script type="text/javascript" src="http://ift.tt/1CsZ62j"></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://ift.tt/1r69DHT" 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!
asked 1 min ago
How to manage elements with the same class in a Jquery method
Aucun commentaire:
Enregistrer un commentaire