Question

您好我使用Jquery方法突出显示地图的区域。（称为maphilight）

当我点击它时，下一个方法会突出显示一个区域。

$('.key').click(function(e) {
    e.preventDefault();
    var data = $(this).mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});

所有区域都有＆＃34;键＆＃34;其中一些还有＆＃34; alpha＆＃34;或＆＃34;控制＆＃34;。

现在的问题是，当我想使用按钮（＆＃34; balpha＆＃34;）同时使用这个jquery高亮显示某些区域时。例如，我想突出显示类＆＃34; alpha＆＃34;。

的区域

然后我使用下一个方法。

$('#balpha').click(function(e) {
    e.preventDefault();
    var data = $('.alpha').mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $('.alpha').data('maphilight', data).trigger('alwaysOn.maphilight');
});

当我这样做时，所有具有班级＆＃34; alpha＆＃34;的区域突出显示，当我再次按它时，它们会毫无问题地关闭。问题是，当我尝试使用类＆＃34; alpha＆＃34;当我尝试逐个管理时，所有区域都作为一个区域工作并突出显示。

我认为这是变量＆＃34;数据＆＃34;的一个问题。但我不知道如何管理它。感谢您的建议：）

以下是显示我的结果的代码示例，希望有助于获得解决方案！再次感谢！

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

Answer 1

这是重现我的结果的示例。

这就是Jquery我正在使用：http://davidlynch.org/projects/maphilight/jquery.maphilight.js

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

$（function（）{ $（＆＃39; .MAP＆＃39）。maphilight（{ fillColor：＆＃39; 008800＆＃39; }）;

    <!-- 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 />
</body>
</html>

一旦你使用了字母数字按钮，按钮1,2,3,4就无法单独工作，可以作为一个选择。

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

1 个答案: