Wie verwalte ich Elemente mit derselben Klasse in einer Jquery-Methode?
Hi Ich verwende eine Jquery-Methode, um beim Klicken ein Tastenkürzel auf einer Tastatur hervorzuheben. Wenn Sie auf die Schaltfläche einzeln klicken, wird diese Tastenkombination umrandet. Alle Bereiche der Karte haben die Klasse "key" und andere die Klassen "alpha" und "control".
un, was ich tun möchte, ist in der Lage zu sein, alle alphanumerischen Tasten gleichzeitig zu klicken, was ein Tastenereignis "balpha" bedeutet.
Das Problem im Code besteht darin, dass nach der Verwendung der Schaltfläche "balpha" alle Bereiche als ein Bereich fungieren und beim Drücken einer Tastenkombination auf der Tastatur alle Tasten mit der Klasse "alpha" hervorgehoben werden, wenn sie einzeln funktionieren sollen.
Hier ist ein Beispiel für den 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>
Danke für jeden Rat, den du mir geben könntest!