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

但它给了我：

未捕获的TypeError：无法读取未定义的属性'contains'

我试过了：

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

但我明白了：

未捕获的TypeError：无法读取未定义的属性'contains'

我做了：

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

我一无所获。

注意

有人指出，这个问题可能与this one重复，但在这里，我只是检查它是否有一个课程没有尝试匹配任何东西。

Answer 1

<强>更新

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

好吧，我看到适用于该类的代码实际上是添加它的代码。

$("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();
      }
    }
  });  
}

每次单击路径数组时，解析路径数组的效率不如直接访问，但这种方式使用walk {d}数组与d3.js或three.js这样的库一起应用动画帧而且效果很好。

我希望它有所帮助！

Answer 2

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

正如传单中所讨论的那样，传单事件中的类名可以按照e.sourceTarget._path.className进行访问。他们尝试过使用oops，可以在https://leafletjs.com/reference-1.0.0.html#class找到更多信息。

以下是替代代码。

很抱歉延迟回复。这是一个例子。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: