1
我正在处理传单项目，其中地图上的超过50个标记需要用〜10个复选框进行过滤。过滤器将控制标记的可见性。除了添加用于过滤的类名之外，是否还有更好的分类DOM的方法？
现在，我的方法是为每个过滤条件的每个标记添加一个相应的类名称。我担心在脚本中为超过50个标记分配10个类名会减慢加载时间。
这里是链接 http://jbk1109.github.io/hiking-info.html
这里是我的代码：标记是基于GeoJSON的数据创建和类名在风格功能添加
<div id="distanceFilterContainer">
<input type="checkbox" name="checkboxField" class ="distanceFilter" id="short">
<label> Under 3 miles </label>
<input type="checkbox" name="checkboxField" class ="distanceFilter" id="medium">
<label> 3-8 miles </label>
<input type="checkbox" name="checkboxField" class ="distanceFilter" id="long">
<label> 8-12 miles </label>
</div>
geojson = L.geoJson(data,{
onEachFeature: featureEvent,
pointToLayer:function(feature, latlng){
// console.log(latlng.lat)
return L.circleMarker(latlng, geojsonMarkerOptions);
},
style: style
}).addTo(mymap)
function style(feature){
console.log(feature)
var length;
if (feature.properties.Length <= 3.0){
length = " short"
}
else if (feature.properties.Length > 3 && feature.properties.Length < 8)
{
length = " medium"
}
else if (feature.properties.Length >= 8.0){
length =" long"
}
console.log(feature.properties.Name + length)
return {className : feature.properties.Name + length}
}
document.getElementById("short").addEventListener("change",handleDistanceFilter)
document.getElementById("medium").addEventListener("change",handleDistanceFilter)
document.getElementById("long").addEventListener("change",handleDistanceFilter)
function handleDistanceFilter(e){
var x = e.target.id
console.log(x)
if (!e.target.checked){
var filtered = document.getElementsByClassName(x)
console.log(x)
for (var i =0; i< filtered.length; i++){
filtered[i].classList.remove("hide")
// filtered[i].style.visibility = 'visible';
}
}
else{
var filtered = document.getElementsByClassName(x)
for (var i =0; i< filtered.length; i++){
console.log(x)
filtered[i].classList.add("hide")
// console.log(filtered)
// filtered[i].style.visibility = 'hidden';
}
}
// console.log(e.target.checked)
}
这听起来像过早优化的情况下。 “我担心[X]会伤害表现”这句话是未来时态，意味着你实际上并没有发现这种情况。 [你可能是对的，但你也可能是错的。]（https://softwareengineering.stackexchange.com/questions/80084/is-premature-optimization-really-the-root-of-all-evil）浏览器速度很快，并越来越好。建议先看看这是否是个问题。 – hunteke
_“我担心在脚本中为50个以上的标记分配10个类名会减慢加载时间。”_ - 为什么，有任何特定的原因/证据？而且，您是否确实意味着加载时间或某种方式的运行时间性能？ – CBroe
运行时间性能 - 现在只有40个标记，但它可能会增加多达5〜600个标记。 – user3562812