Javascript 除了添加用于筛选的类名之外，还有没有更好的方法对DOM进行分类？

我正在从事传单项目，其中地图上的50多个标记需要使用10个复选框进行过滤。过滤器将控制标记的可见性

现在，我的方法是为每个筛选条件的每个标记添加相应的类名。我担心为脚本中超过50个标记指定10个类名会减慢加载时间

这里是链接

下面是我的代码：标记是基于geojson数据创建的，类名是在style函数中添加的

<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)

}

3英里以下
3-8英里
8-12英里
geojson=L.geojson（数据{
onEachFeature:featureEvent，
pointToLayer：功能（特性、latlng）{
//控制台日志（latlng.lat）
返回L.circleMarker（latlng、geojsonMarkerOptions）；
},
风格：风格
}).addTo（mymap）
功能样式（特征）{
console.log（特性）
变异长度；
if（feature.properties.Length 3&&feature.properties.Length<8）
{
length=“中等”
}
否则如果（feature.properties.Length>=8.0）{
length=“long”
}
console.log（feature.properties.Name+长度）
返回{className:feature.properties.Name+length}
}
document.getElementById（“short”）.addEventListener（“更改”，handleDistanceFilter）
document.getElementById（“介质”）.addEventListener（“更改”，handleDistanceFilter）
document.getElementById（“long”）.addEventListener（“更改”，handleDistanceFilter）
功能手柄距离过滤器（e）{
var x=e.target.id
console.log（x）
如果（！e.target.checked）{
var filtered=document.getElementsByClassName（x）
console.log（x）
对于（变量i=0；i

我建议对每个属性使用

data

属性，而不是给每个属性一个不同的类，除非它们需要明确地设置样式。我不知道你是否真的受到了优化的打击，但是从可维护性的角度来看，另一个开发人员可能会问为什么会有这么多的类

element.setAttribute('data-name', x);

然后，您可以通过以下方式选择所需的元素：

document.querySelectorAll('[data-name=' + x + ']');

---

我建议对每个类使用

data

属性，而不是给每个类一个不同的类，除非它们需要明确的样式。我不知道你是否真的受到了优化的打击，但是从可维护性的角度来看，另一个开发人员可能会问为什么会有这么多的类

element.setAttribute('data-name', x);

然后，您可以通过以下方式选择所需的元素：

document.querySelectorAll('[data-name=' + x + ']');

---

如果不希望标记中有太多的类名，可以用一个更新哈希的函数替换样式函数，该函数使用键作为过滤器，值作为所需的元素ID

例如：

var the_hash = {"short": [], ...}
function style(feature){
    if (feature.isShort())
        the_hash["short"].push(feature);
}

function handleFilter(filter) {
    var elements = the_hash[filter];
    for (var i = 0, item; item = elements[i]; i++) {
        item.doSomething();
    }
}

---

如果不希望标记中有太多的类名，可以用一个更新哈希的函数替换样式函数，该函数使用键作为过滤器，值作为所需的元素ID

例如：

var the_hash = {"short": [], ...}
function style(feature){
    if (feature.isShort())
        the_hash["short"].push(feature);
}

function handleFilter(filter) {
    var elements = the_hash[filter];
    for (var i = 0, item; item = elements[i]; i++) {
        item.doSomething();
    }
}

---

对于传单，您应该避免直接操纵标记的DOM，因为库仍然跟踪

L.circleMarker

对象，并认为它们仍然在地图上

相反，您应该简化它们，以便正确地通知库

至于过滤当前显示在地图上的标记，也不需要求助于DOM查询，因此必须事先分配一些元数据类（或数据集）以方便此类查询

由于您通过

L.geoJSON

工厂构建功能，并将结果保存到

geoJSON

变量中，因此您可以简单地使用其上的方法在先前构建的每个功能层上应用回调函数

然后，您可以访问每个层的GeoJSON属性，因为它被

layer.feature

中的传单引用

var map=L.map（“map”）；
变量geoJSONdata={
“类型”：“FeatureCollection”，
“特征”：[{“类型”：“特征”，“属性”：{“长度”：8}，“几何体”：{“类型”：“点”，“坐标”：[-121.7350,46.7860]}，
{“类型”：“特征”，“属性”：{“长度”：12}，“几何体”：{“类型”：“点”，“坐标”：[-121.0750,48.4755]}，
{“类型”：“特征”，“属性”：{“长度”：3.2}，“几何体”：{“类型”：“点”，“坐标”：[-121.8913，46.6664]}，
{“类型”：“特征”，“属性”：{“长度”：6.2}，“几何体”：{“类型”：“点”，“坐标”：[-123.2321，47.5066]}，
{“类型”：“特征”，“属性”：{“长度”：8}，“几何体”：{“类型”：“点”，“坐标”：[-121.6925,48.8469]}，
{“类型”：“特征”，“属性”：{“长度”：7.2}，“几何体”：{“类型”：“点”，“坐标”：[-120.7354,48.5162]}]
};
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
var geoJSONlayerGroup=L.geoJSON（geoJSONdata{
onEachFeature:onEachFeature
}).addTo（地图）；
fitBounds（geoJSONlayerGroup.getBounds（））；
var lengthInput=document.getElementById（'length'）；
var lengthDisplay=document.getElementById（'length2'）；
函数filterFeatures（）{
var length=parseFloat（lengthInput.value）；
lengthDisplay.innerHTML=长度；
geoJSONlayerGroup.eachLayer（函数（层）{
//访问与要素GeoJSON属性相关的图层。
如果（layer.feature.properties.Length带有传单，则应避免直接操作标记的DOM，因为库仍然跟踪
L.circleMarker
对象并认为它们