切换 jQuery 矢量地图中的函数

Question

如何在jQuery矢量图中实现切换功能，

我的要求在这里：如果用户选择了任何区域，它应该用颜色突出显示。 如果用户单击同一区域，它应该会进入旧状态（没有颜色或默认状态）。

我可以使用 JS 和 jQuery 来实现吗，或者我需要任何其他插件的帮助。

高度赞赏任何想法、建议和指导。谢谢

示例代码：

<script src="Mobile Portal Management Tool (MPMT)_files/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        enableZoom: true,
        showTooltip: true,
    //    selectedRegion: 'MO'
        onRegionClick: function(event, code, region)
        {
           /* var message = 'You selected "'
                + region 
                + '" which has the code: '
                + code.toUpperCase()
     //       alert(message);
            $('#location-selected').html(message); */



            var ul = $('#location-selected');
            var list = ul.children('li');
            var isInList = false;
            for(var i = 0; i < list.length; i++){
                if(list[i].innerHTML === region) {
                    isInList = true;
                    break;
                }
            }
            if(isInList)
                alert("User selected region already in the list")
            else
                var newli = $('<li></li>').html(region).appendTo(ul);       

            $('ul').children('li').on('dblclick',function()
            {
                //alert("Selected list item will be removed from the list...")
                $(this).remove();
            });
         }


    });
</script>

Answer 1

您可以通过将属性colors 分配给所选区域来执行此操作。例如，要使加利福尼亚蓝，你可以写这样的东西

    var highlight = {colors: {ca : '#0000ff'}}

要从时钟回调中设置颜色属性，您可以调用它

    onRegionClick: function(element, code, region) {
        $('#vmap').vectorMap('set', 'colors', highlight);
    }

要切换颜色，您可以在 if 开关中添加该开关，该开关仅检查元素是否设置了高亮颜色。您还可以使用它在列表中追加/删除区域。

    $(document).ready(function() {
        highlight = {};
        $('#vmap').vectorMap({
            map: 'usa_en',
            enableZoom: true,
            showTooltip: true,
            color: '#f4f3f0',
            onRegionClick: function(element, code, region) {
                if(highlight[code]!=='#0000ff'){
                    highlight[code]='#0000ff';
                    $('<li id=\"li_'+code+'\"></li>').html(region).appendTo($('#location-selected'));
                } else {
                    highlight[code]='#f4f3f0';
                    $('#li_'+code).remove();
                }
                $('#vmap').vectorMap('set', 'colors', highlight);
            },
             onRegionOut: function(element, code, region){
                 $('#vmap').vectorMap('set', 'colors', highlight);
             },
        });
    });

我也把它放在 jsfiddle 上，以便快速说明： http://jsfiddle.net/FxVzG/

要使其正常工作，您还需要在 onRegionOut 中设置颜色。

Answer 2

创建一个 CSS 类来突出显示然后使用 JS 或 jQuery 来切换？

CSS 高亮类：

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}

jQuery 切换

$(document).ready(function(){
    $('#text').click(function(){
        $(this).toggleClass('highlighted');
    });
});

示例取自 Codecademy：JSFiddle