根据对象'；使用JavaScript创建类别

我试图在Mapbox地图上显示不同的标记，但我的代码似乎没有达到预期效果。 我正在从WordPress自定义帖子类型中提取数据（使用的变量已定义）：

然后我创建标记（div）：

上面的代码工作得很好，但我想为不同类别的地方使用不同的标记。为此，我尝试为不同的类别ID添加不同的类（假设我只有两个ID为2和3的类别）：

geojson.features.forEach（函数（标记）{
//为每个功能创建一个HTML元素
var el=document.createElement（“div”）；
el.className=“标记”；
for（var k=0；k

类

.cat2

和

.cat3

包含不同的标记（背景URL）。上面的代码给出了所有标记类

.cat2

。我怀疑我的JavaScript逻辑中存在某种错误，但我尝试了上面的许多变体，但我无法解决它。任何帮助都将不胜感激。

此代码：

for(var k = 0; k < categoriesArray.length; k++) {
    var classCat = "";
      if (categoriesArray[k] == 2) {

        classCat = "marker cat2";
        el.className = "";            
        el.className = classCat;

      } else if (categoriesArray[k] == 3) {

        classCat = "marker cat3";
        el.className = ""; 
        el.className = classCat;
  }
}

for（var k=0；k

遍历

categoriesArray

的所有元素，并检查每个项目是2还是3。随后，除非由于某种原因（

categoriesArray

在此期间不会更改（并且没有任何更改的迹象），否则如果数组中没有匹配项，则不会更改任何内容，或者最后一个匹配项将应用于所有元素

让我们考虑下面的例子：<代码>类别>数组>代码> <代码> [ 1, 3, 2，4 ] < /代码>

在这种情况下，对于第一次迭代，您的循环将找不到任何匹配项，在第二次迭代中，它将找到3，并相应地设置

classCat

，

el.className

，在第三次迭代中，它将找到2，并覆盖上一次迭代中设置的

classCat

和

el.className

的值，最后4将不匹配2或3

您的算法将设置为循环中最后一个匹配指定的值，忽略与2或3不同的任何内容，但是，您需要以某种方式将类别分配给标记，并加载这些值，然后将它们匹配到类别类。另外，

el.className=“”是不需要的，因为您在下一行中重写了非常相同的值。最后，
classCat
似乎不是一个必需的变量，您可以只执行类似于
el.className=“marker cat2”的操作

var geojson = {
   type: 'FeatureCollection',
   features: placesArray //an array containing the coordinates and other properties from the custom post type
};

geojson.features.forEach(function(marker) {

   // create a HTML element for each feature
   var el = document.createElement("div");
   // I'm adding a class that sets "background-image" of the marker
   el.className = "marker";

   new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

 });

geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
var el = document.createElement("div");
el.className = "marker";

for(var k = 0; k < categoriesArray.length; k++) {
    var classCat = "";
      if (categoriesArray[k] == 2) {

        classCat = "marker cat2";
        el.className = "";            
        el.className = classCat;

      } else if (categoriesArray[k] == 3) {

        classCat = "marker cat3";
        el.className = ""; 
        el.className = classCat;
  }
}


  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

});

for(var k = 0; k < categoriesArray.length; k++) {
    var classCat = "";
      if (categoriesArray[k] == 2) {

        classCat = "marker cat2";
        el.className = "";            
        el.className = classCat;

      } else if (categoriesArray[k] == 3) {

        classCat = "marker cat3";
        el.className = ""; 
        el.className = classCat;
  }
}