如何给SVG路径添加活动类？

Question

我希望添加一个活动类，这样每当我点击路径时它就会保持活动状态，直到我点击另一个路径。最好的方式是尽可能简单。我已经使用jQuery使这个SVG可点击。 。这是我的jQuery代码-

$(document).ready(function () {
$('#mySVG').load("bd-map.html", function () {

    $("#bd-map").click(function (evt) {
        switch (evt.target.id) {
            case "panchagarh":
                $('#info').load('info.html #panchagarh')     //loading data from info.html
                break;
            case "bandarban":
                $('#info').load('info.html #bandarban')     //loading data from info.html
                break;
            case "comilla":
                $('#info').load('info.html #comilla')
                break;
            case "sylhet":
                $('#info').load('info.html #sylhet')
                break;
        }
    });
});

})

- user16292802

Answer 1

假设您想要添加类的元素是位于#bd-map容器内部的SVG元素，这段代码就可以实现。关键是您要么点击路径元素，要么点击文本元素，因此您需要嗅探tagName并相应地做出反应。从text元素到path元素的路径是$(evt.target).parent().prev('path')（使用jQuery保持一致）。

$("#bd-map").click(function(evt) {
  $("#bd-map").find('path').removeClass('active');
  let targ = evt.target.tagName === 'path' ? $(evt.target) : $(evt.target).parent().prev('path');
  console.log(targ.attr('id'))
  targ.addClass('active')
  switch (targ.attr('id')) {
    case "panchagarh":
      $('#info').load('info.html #panchagarh') //loading data from info.html
      break;
    case "bandarban":
      $('#info').load('info.html #bandarban') //loading data from info.html
      break;
    case "comilla":
      $('#info').load('info.html #comilla')
      break;
    case "sylhet":
      $('#info').load('info.html #sylhet')
      break;
  }
});

- Kinglish

---

是的，你说得对，但它还没有起作用，能否请您再次查看代码？ - user16292802

evt 是触发用户点击事件的变量，当用户点击时，该变量将返回该路径的 ID。 - user16292802

@Kinglish先生，感谢您的辛勤工作。但是您更新后的版本依旧无法使用。以下是更新后的链接- https://jsfiddle.net/#&togetherjs=ewPeeJ5MG9 - user16292802

好的，试试这个最新版本。我认为问题在于，取决于你点击了什么（路径或路径内的文本），你的evt.target将会不同。这个最新代码检查目标是否为路径，如果不是，就找到它。我试着做了一个代码片段，但地图代码太长了，无法放进去。 - Kinglish

最新的jfiddle没有显示任何内容，我不想浏览未注释的存储库。我的最后一条评论有帮助吗？ - Kinglish