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

【问题标题】：How to manage different elements with the same class in Jquery and html5如何在 Jquery 和 html5 中管理具有相同类的不同元素
【发布时间】：2014-09-14 18:37:55
【问题描述】：

嗨，我正在使用 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');
});

所有区域都有“key”类，其中一些还具有“alpha”或“control”类。

现在的问题是，当我想使用按钮（“balpha”）同时突出显示此 jquery 的某些区域时。例如，我想突出显示具有“alpha”类的区域。

然后我使用下一个方法。

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

当我这样做时，所有具有“alpha”类的区域都会突出显示，当我再次按下它时，它们会毫无问题地关闭。问题是，当我在使用“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>

【问题讨论】：

不是 100% 清楚需要什么样的行为，因为所有区域都有相同的类。 jsfiddle.net 中的演示以及演示中的简要说明会有所帮助
var data = $(this).mouseout().data('maphilight') mouseout 的用途是什么？
link jsfiddle.net 上有一个演示，但是当我从浏览器上的 .html 文件加载它时，它就不同了。
How to manage elements with the same class in a Jquery method的可能重复

标签： javascript jquery html

【解决方案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"

【讨论】：