2

如何在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>
4

2 回答 2

4

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

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

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

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

And to toggle the colors you can add in a if switch that just checks if the element has the highlight color set. And this you can also use to append/remove the region to/from the list.

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

I also put this on jsfiddle for a quick illustration: http://jsfiddle.net/FxVzG/

For it to work properly you need to set the colors also in the onRegionOut.

于 2013-03-14T14:36:37.917 回答
0

创建一个 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

于 2013-03-14T08:23:54.247 回答