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

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

转载作者：行者123 更新时间：2023-11-28 07:59:05

嗨，我使用 Jquery 方法突出显示 map 区域。 (称为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”类后尝试单独执行此操作时，所有区域都作为一个整体工作，并且当我尝试一一管理时，所有区域都会突出显示。

我认为这是变量“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>

最佳答案

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

这是我使用的 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>

$(函数() { $('.map').maphilight({ 填充颜色:'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 />
</body>
</html>