开发者问题收集

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

2018-06-10
1232
javascript jquery leaflet

我运行了以下内容（使用 传单图 ）：

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

但是它给了我：

Uncaught TypeError: Cannot read property 'contains' of undefined

我试过了： 

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 ，当我单击带有该 class 的 path 时，我可以： 

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

但是我得到了：

Uncaught TypeError: Cannot read property 'contains' of undefined

而我得到了： 

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

我什么也没得到。

注意

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

2个回答

当我进一步研究时，发现传入您函数的事件被传单的 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>
Ullas Hunka
2018-06-10

更新

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

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

$("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 数组的方式与 或 等库一起使用来应用动画帧，效果很好。

希望对您有所帮助！

Evhz
2018-06-10