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

好的，代码看起来很无辜，但是当你创建一个数据对象并将其应用于多个元素时，问题就存在了。

对象不会被复制，它们会作为参考传递。这意味着更改您认为是一个实例的对象，实际上将更改所有实例，因为实例只是对单个对象的引用。

解决方案是遍历每个元素并将其作为独立实例处理。

$('#balpha').click(function(e) {
        e.preventDefault();
        $('.alpha').each(function(){
          /* element specific data object*/
          var data= $(this).data('maphilight') ;
            data.alwaysOn = !data.alwaysOn;
            $(this).trigger('alwaysOn.maphilight')
        });
 });

现在，当您查看单个键时，您只处理特定于元素的数据对象，而不是传递给所有键的单个对象

的 DEMO

如果您不熟悉对象引用原则，这是一个可以从浏览器控制台运行的简单示例：

var a={foo:'bar'}; var b= a; /* b is not a copy, but a reference*/ b.foo='godzilla';/* a.foo will be the same value*/ alert(a.foo); //"godzilla"

如何在Jquery和html5中管理具有相同类的不同元素

1 个答案: