javascript - 如何检查 svg 路径是否具有与数组中的值匹配的类,如果是,则添加新类
问题描述
我有一个数组和一些svg path
元素(我正在使用传单地图)。我需要检查路径的类是否与我的数组中的一个值匹配,如果是,则fadeIn
向其中添加一个类。
var foundNations = ["usa", "France", "Italy"];
document.querySelectorAll('path').forEach(path => {
if (foundNations.includes(path.className)) {
path.className.add('fadeIn');
console.log(path.className);
}
});
(function($) {
var map = L.map('map').setView([45.4655171, 12.7700794], 2);
map.fitWorld().zoomIn();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.light'
}).addTo(map);
var mapHalfHeight = map.getSize().y / 2,
container = map.zoomControl.getContainer(),
containerHalfHeight = parseInt(container.offsetHeight / 2),
containerTop = mapHalfHeight - containerHalfHeight + 'px';
container.style.position = 'absolute';
container.style.top = containerTop;
map.scrollWheelZoom.disable();
var southWest = L.latLng(-89.98155760646617, -180),
northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: false });
});
// get color depending on population density value
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 1,
opacity: 1,
color: '#ffffff',
dashArray: '',
fillOpacity: 0,
fillColor : '#FF0080',
className: feature.properties.name
};
}
var geojson;
function selectNation(e) {
}
function onEachFeature(feature, layer) {
layer.on({
click: selectNation
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
})( jQuery );
#map {
width: 100vw;
height: 100vh;
}
.fadeIn {
fill: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://www.jikupin.com/world.json"></script>
<div id='map'></div>
解决方案
你的错误很微妙。您从Array
s开始String
:
var nationList = ["usa", "france", "italy"];
然后你打电话,作为参数String.prototype.includes
传递。path.className
if (foundNations.includes(path.className)) { path.classList.add('fadeIn')
在那里,您隐含地假设这path.className
是一个String
. 但是,惊喜惊喜,它不是一个String
,它是一个SVGAnimatedString
!
console.log(path.className)
> [object SVGAnimatedString] {
animVal: "germany",
baseVal: "germany"
}
是的,在某些极端情况下,可以在动画期间修改 SVG 元素的类名。
您可能想要做的是使用s的baseVal
属性SVGAnimatedString
:
console.log(typeof path.className.baseVal)
> "string"
现在一切都应该按照您期望的方式更紧密地工作:
if (foundNations.includes(path.className.baseVal)) {
path.classList.add('fadeIn')
}
console.log(path.className.baseVal);
> "spain fadeIn"
由于另一个假设,您还有第二个问题。您假设它只path.className
包含一个类名,但根据文档,强调我的:
cName
是一个字符串变量,表示当前元素的类或空格分隔的类。
事实上,如果您使用浏览器中可用的开发人员工具来检查 SVG 元素,您会看到类似...
<path class="Italy leaflet-interactive" stroke="#ffffff" ....></path>
所以在这种情况下,您假设 theclassName.baseVal
将是 string "Italy"
,但实际上,它需要 value "Italy leaflet-interactive"
。
这里的方法是使用Element.classList
遍历类名来查看它们是否与给定的组匹配。
此外,我认为这是XY 问题的一个实例。我想你不想问
如何检查 SVG 路径是否具有匹配的类
foo
?
反而
特征匹配时如何在 Leaflet 中符号化 SVG 多边形
foo
?
因为我认为将检查移到style
回调函数中更优雅,例如:
geojson = L.geoJson(statesData, {
style: function(feature){
var polygonClassName = feature.properties.name;
if (nationList.contains(feature.properties.name)) {
polygonClassName += ' fadeIn';
}
return {
weight: 1,
opacity: 1,
color: '#ffffff',
dashArray: '',
fillOpacity: 0,
fillColor : '#FF0080',
className: polygonClassName
};
},
onEachFeature: onEachFeature
}).addTo(map);
Leaflet 提供了方便的功能,这样L.Path.setStyle
可以隐藏直接处理选择器和 SVG 类的复杂性,只要您保留对L.Polygon
around 实例的引用(在这种情况下,您可以在onEachFeature
回调中执行此操作)。
推荐阅读
- sql - TSQL:给定一组 ID,获取所有标头,使得该集包含在标头的子项中
- graphql - 如何将对象数组粘贴到 GraphQL Apollo 缓存中?
- c++ - 按动态条件/约束过滤图
- excel - Excel Web Query 和 IE 停用
- c++ - Visual Studio Code - 具有指定功能的文件的交互式链接
- javascript - EJS 的问题无法读取未定义的属性“电”
- python - 是否可以安装 sklearn 管道的单独部分?
- javascript - 如何在javascript中2秒后自动删除用户输入添加的段落?
- azure - SAML VIP 创建的文档?
- r - 如何置换给定矩阵的行