Question

您好我正在使用Jquery方法在点击时突出显示键盘上的键帽。当您单独单击时，您将在该键帽上获得边框。地图的所有区域都有“key”类，其他区域有“alpha”和“control”类。

现在我想做的是能够在按钮事件“balpha”的同时点击所有字母数字键。

代码中的问题是，在使用“balpha”按钮后，所有区域都作为一个区域，当按下键盘上的一个键帽时，所有具有“alpha”类的键都会突出显示，而它们应该单独工作。

以下是代码示例：

<!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>

感谢您给我的任何建议！

如何在Jquery方法中管理具有相同类的元素

0 个答案: