Como gerenciar elementos com a mesma classe em um método Jquery
Oi, eu estou usando um método Jquery para destacar um Keycaps em um teclado quando clicar. Quando você clica no indivíduo, você obtém uma borda no teclado. Todas as áreas do mapa têm a classe "chave" e outras têm a classe "alfa" e "controle".
Agora, o que eu quero fazer é poder clicar em todas as teclas alfanuméricas ao mesmo tempo em que um evento de botão "balpha".
O problema no código é que, depois de usar o botão "balpha", todas as áreas atuam como uma só e, ao pressionar uma tecla no teclado, todas as teclas com a classe "alpha" são destacadas, quando devem trabalhar individualmente.
Aqui está uma amostra do código:
<!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>
Obrigado por qualquer conselho que você poderia me dar!