Select 多个类具有属性。 jQuery

Question

我有一个用于交互式地图的功能，我将鼠标悬停在一个元素上以显示基于 class 与国家/地区后缀匹配的特定区域。我正在尝试弄清楚如何 select 多个 classes 来显示多个区域。

代码：

var mapObj = jQuery('#vmap').data('mapObject');

            jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
                // event.preventDefault();
                var elem = event.target,
                    evtype = event.type;

                if (evtype === 'mouseover') {
                    mapObj.select(jQuery(elem).attr('class'));
                } else {
                    mapObj.deselect(jQuery(elem).attr('class'));
                };
            });

};

<ul id="countries">
  <li><a class="SE" href="">Sweden</a></li>
  <li><a class="DK" href="">Denmark</a></li>
</ul>

我可能走错了路，但我想通过使用多个 classes 来定位多个区域：

<li><a class="SE DK" href="">Sweden and Denmark</a></li>

这当然行不通，但说明了我想做什么。这里最好的方法是什么？

示例：

       jQuery('#vmap').vectorMap({
            map: 'world_en',
onLabelShow: function (event, label, code) {
        
                if (code == 'se') {
                var countryName = label[0].innerHTML;
          var html = ['<span class="tooltip-up arrow-down-center">',
           countryName,
': 50% of production',
          '</span>'
          ].join("");
          label[0].innerHTML = html;
                }
        },
            backgroundColor: '#fff',
            enableZoom: false,
            color: '#ffffff',
            hoverOpacity: 0.7,
            selectedColor: '#666666',
            showTooltip: true,
            values: sample_data,
            scaleColors: ['#C8EEFF', '#006491'],
            normalizeFunction: 'polynomial',                           
            pinMode: 'content',
            regionsSelectableOne: false,
                regionsSelectable: false,
                series: {
                regions: [{
                  scale: ['#C8EEFF', '#0071A4'],
                  normalizeFunction: 'polynomial'
               }]
             }
        });
 var mapObj = jQuery('#vmap').data('mapObject');

            jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
                // event.preventDefault();
                var elem = event.target,
                    evtype = event.type;

                if (evtype === 'mouseover') {
                    mapObj.select(jQuery(elem).attr('class'));
                } else {
                    mapObj.deselect(jQuery(elem).attr('class'));
                };
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
<script src="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/jquery.vmap.js"></script>
        <script src="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/maps/jquery.vmap.world.js"></script>
        <script src="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/jquery.vmap.sampledata.js"></script>

  
<div id="vmap" style="width: 800px; height: 400px;"></div>

<ul id="countries">
  <li><a class="SE" href="">Sweden</a></li>
  <li><a class="DK" href="">Denmark</a></li>
   <li><a class="SE DK" href="">Sweden and Denmark</a></li>
</ul>

Answer 1

您可以修改 select/deselect 函数以接受 classes 数组，或者循环 classes 并为每个 class 调用 select/deselect姓名：

var mapObj = jQuery('#vmap').data('mapObject');

        
jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
  var elem = event.target;
  var countryCodes = jQuery(elem).attr('class').split(/\s+/);

  evtype = event.type;

  if (evtype === 'mouseover') {
    jQuery.each(countryCodes, function(index, code) {
       mapObj.select(code);
    });
  } else {
    jQuery.each(countryCodes, function(index, code) {
      if (mapObj.isSelected(code)) {
        mapObj.deselect(code);
      } else {
        mapObj.select(code);
        mapObj.deselect(code);
      }
    });
  };
});

Answer 2

您可以拆分每个 class 并放入 foreach 循环，这样所有元素都将定位 class 存在的位置

var mapObj = jQuery('#vmap').data('mapObject');

        jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
            // event.preventDefault();
            var elem = event.target,
                evtype = event.type;

            var attrClass = jQuery(elem).attr('class');
            var claArr = attrClass.slit(" ");
            jQuery(claArr).each(function(index,values){
                if (evtype === 'mouseover') {
                    mapObj.select(values);
                } else {
                    mapObj.deselect(values);
                };
            });    
            if (evtype === 'mouseover') {
                mapObj.select(jQuery(elem).attr('class'));
            } else {
                mapObj.deselect(jQuery(elem).attr('class'));
            };
        });

};

Select 多个类具有属性。 jQuery

Select multiple classes with attr. with jQuery

javascript

jquery

jqvmap

Select 多个 类 具有属性。 jQuery

Select multiple classes with attr. with jQuery

javascript

jquery

jqvmap

Select 多个类具有属性。 jQuery