如何检查单击的 svg 路径是否有类？

Question

我运行他跟随（使用leaflet map）：

HTML

<svg>
  <path class="Mexico leaflet-interactive fadeIn"></path>
</svg>

JS

function selectNation(e) { 
  if(e.target.classList.contains("fadeIn")) {
    console.log("hello");
    var countryName = e.target.feature.properties.name;
    $("#myCountryName").attr("value", countryName);
    submitSearchForm();
  }
}

function onEachFeature(feature, layer) {
  layer.on({
    click: selectNation
  });
}

但它给了我：

未捕获的类型错误：无法读取未定义的“包含”属性

我试过了：

if($(e.target).hasClass("fadeIn")) {...

但它什么也不做，在控制台中什么也没说。我认为使用e.target 存在一些问题，但这有效：var countryName = e.target.feature.properties.name;。

我确认fadeIn 在svg path 上有一个班级。

更新

添加更多上下文：

我首先运行地图：

var map = L.map('map').setView([45.4655171, 12.7700794], 2);

加载地图后，我要求通过 ajax 回调加载一些变量，并将这些变量设置为路径类。

$.fn.almComplete = function(alm){
  var foundNations = $.unique(nationList.sort());
  $("path").each(function() {
    for (var i = 0; i < foundNations.length; i++) {
      if ($(this).hasClass(foundNations[i])) {
        $(this).addClass("fadeIn");
      }
    }
  });
};

添加类后，每个path 现在都有fadeIn 作为class，当我点击path 和class 时，我会这样做：

function selectNation(e) { 
  if(e.target.classList.contains("fadeIn")) {
    console.log("hello");
    var countryName = e.target.feature.properties.name;
    $("#myCountryName").attr("value", countryName);
    submitSearchForm();
  }
}

function onEachFeature(feature, layer) {
  layer.on({
    click: selectNation
  });
}

但我明白了：

未捕获的类型错误：无法读取未定义的“包含”属性

我愿意：

if($(e.target).hasClass("fadeIn")) {...

我什么也得不到。

注意

有人指出，这个问题可能与this one 重复，但在这里我只是检查它是否有一个不尝试匹配任何内容的类。

Answer 1

当我稍微研究了一下时，您的函数中出现的事件被传单的 dom 事件覆盖，这不允许用户直接拥有我们在讨论中所做的元素。

正如在传单事件中的聊天类名中所讨论的，可以通过以下方式访问 e.sourceTarget._path.className。他们已经尝试在这里使用 oops，更多信息可以在 https://leafletjs.com/reference-1.0.0.html#class 找到。

以下是替代代码。

抱歉延迟回复。这是示例。

var svg = document.getElementById("ini")
var paper = Snap(svg);



var p = paper.path("M0,0L50,0L30,302").attr({
        fill: "#ff9900",
        stroke: "#bada55",
        strokeWidth: 5
    });
    console.log(p)
p.addClass("green");
var arr = ["green","red","blue"];
p.click(function(e){
  
  console.log(e.target.className, e.target.className.baseValue=="green");
  this.attr({stroke:getRandomColor()})
})
function getRandomColor() {
  var letters = '0123456789ABCDEF';
   var color = '#';
  for (var i = 0; i < 6; i++) {
   color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
}


    

.green{fill:green}
.blue{fill:blue}
.red{fill:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="ini">
 
</svg>

Answer 2

更新

我删除了之前的内容，因为它不适用，在聊天中理解。

嗯，我看到与该类一起工作的代码是实际添加它的代码。

$("path").each(function() {
  for (var i = 0; i < foundNations.length; i++) {
    if ($(this).hasClass(foundNations[i])) {
      $(this).addClass("fadeIn");
    }
  }
});

那么就可以用同样的方法，这样就可以用同样的方法得到一个this对象了。方法是比较路径数组中点击的节点：

function selectNation(e) { 
  $("path").each(function() {
    if(e === this) { // or any sort of compare logic
      // this is the node
      if($(this).hasClass("fadeIn") { // ensure about the class
        console.log("hello");
        var countryName = this.feature.properties.name; // try 
        $("#myCountryName").attr("value", countryName);
        submitSearchForm();
      }
    }
  });  
}

每次单击路径数组时解析路径数组不如直接访问有效，但这种遍历 dom 数组的方式与 d3.js 或 three.js 等库一起使用，以应用动画帧并且效果很好。

希望对你有帮助！