Javascript 如何在Jquery方法中管理具有相同类的元素
嗨，我正在使用Jquery方法在单击时高亮显示键盘上的键帽。当您单击该键时，该键帽上会有一个边框。地图的所有区域都有“key”类，其他区域有“alpha”和“control”类 现在，我想做的是能够同时单击所有字母数字键，按钮事件“balpha” 代码中的问题是，在使用“balpha”按钮后，所有区域都作为一个整体工作，当按下键盘上的一个键帽时，所有带有“alpha”类的键都会高亮显示，而它们应该单独工作 下面是代码示例：Javascript 如何在Jquery方法中管理具有相同类的元素,javascript,jquery,html,Javascript,Jquery,Html,嗨，我正在使用Jquery方法在单击时高亮显示键盘上的键帽。当您单击该键时，该键帽上会有一个边框。地图的所有区域都有“key”类，其他区域有“alpha”和“control”类 现在，我想做的是能够同时单击所有字母数字键，按钮事件“balpha” 代码中的问题是，在使用“balpha”按钮后，所有区域都作为一个整体工作，当按下键盘上的一个键帽时，所有带有“alpha”类的键都会高亮显示，而它们应该单独工作 下面是代码示例： <!doctype html> <html> &
<!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>
键盘设计师
$（函数（）{
$（'.map'）.maphilight({
fillColor:'008800'
});
$（'.key'）。单击（函数（e）{
e、 预防默认值（）；
var data=$（this.mouseout（）.data（'maphilight'）| |{}；
data.alwaysOn=！data.alwaysOn；
$（this.data（'maphilight'，data.trigger（'alwaysOn.maphilight'）；
});
$（'#balpha'）。单击（函数（e）{
e、 预防默认值（）；
var data=$（'.alpha'）.mouseout（）.data（'maphilight'）|{}；
data.alwaysOn=！data.alwaysOn；
$（'.alpha'）.data（'maphilight'，data.trigger（'alwaysOn.maphilight'）；
});
});
钥匙组
字母数字