Javascript 如何在Jquery和html5中使用同一类管理不同的元素_Javascript_Jquery_Html

Javascript 如何在Jquery和html5中使用同一类管理不同的元素

javascript jquery html

Javascript 如何在Jquery和html5中使用同一类管理不同的元素,javascript,jquery,html,Javascript,Jquery,Html,Hi Im使用Jquery方法高亮显示地图区域。（称为maphilight）下一个方法是在单击某个区域时高亮显示该区域 $('.key').click(function(e) { e.preventDefault(); var data = $(this).mouseout().data('maphilight') || {}; data.alwaysOn = !data.alwaysOn; $(this).data('maphilight', data).tr

Hi Im使用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');
});

所有区域都有“关键”类，其中一些区域也有“阿尔法”或“控制”类

现在的问题是，当我想用这个jquery同时使用一个按钮（“balpha”）高亮显示一些区域时。例如，我想突出显示类为“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”后单独执行时，所有区域都作为一个整体工作，并且在我尝试逐个管理时，所有区域都突出显示

我认为变量“data”有问题，但我不知道如何管理它。谢谢你的建议：）

这里是一个示例代码，显示了我的结果，希望它能帮助得到一个解决方案！！！再次感谢

<!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'）；
});
});
钥匙组
字母数字

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

对象不会被复制，而是作为引用传递。这意味着在你认为是一个实例的地方改变对象，实际上会改变所有的实例，因为实例只是对单个对象的引用

解决方案是在每个元素上循环，并将其数据对象视为一个独立的实例

$('#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')
        });
 });

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

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

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"

由于所有区域都有相同的类，所以不100%清楚需要什么行为。jsfiddle.net中的演示以及演示中的简要说明将有助于

var data=$（this）.mouseout（）.data（'maphilight'）

jsfiddle.net上有一个演示，但当我从浏览器上的.html文件加载它时，它会有所不同。可能是