使用 svg 在外部多边形事件上触发内部多边形上的事件

Question

我有一个 svg，其中我有多个由扇区组成的段。单击时扇区切换类并更改颜色。我需要内部扇区来减轻外部扇区的点击事件

Here 是相同的小提琴链接。

我尝试提供诸如herbalLvl1、herbalLvl2、herbalLvl3 之类的类，以便在点击HerbalLvl2 或HerbalLvl3 时触发herbalLvl1 上的点击事件。但是这些部门已经有一个类，我需要这些只有一个类来切换动态创建的类，如下所示：

    var myclass=$(this).attr("class");
    var classarray=myclass.split(" ");
    var currentClass=classarray[0]; var thisClass=classarray[0];



var res=currentClass.split("clicked");
if(res.length==1)
    {
      $(this).removeClass(thisClass);
      $(this).addClass(currentClass+'clicked');
      console.log($(this).attr("class"));

    }
    else
    if(res.length==2)
    {
        console.log('2');

        $(this).removeClass(thisClass);
        $(this).addClass(res[0]);
        console.log($(this).attr("class"));
    }

如果我向多边形添加另一个类，那么 $(this).addClass(res[0]); 将返回不同的值，因为类以下列方式被删除：

页面加载：草本植物Lvl1

点击选择：herbalLvl1herbalclicked

点击取消选择：herbalclicked herbLvl1clicked

n 以此类推，因为新添加的类最后会附加。

除了应用多个类之外，有没有办法在选择外环时选择内环。

Answer 1

编辑 （或第二个答案！）
由于取消选择多边形的能力显然是必要的......

您会注意到取消选择比仅选择要复杂一些。
为什么？

因为一个选择也选择了它的所有“父母”。
但是取消选择可能不会取消选择它的父母，因为可能选择了另一个兄弟...

所以必须检查那个案例！

我在代码中包含了尽可能多的 cmets。
;)

你的鼠标一定会喜欢This Fiddle。

$("polygon").click(function() {

  var myclass = $(this).attr("class");
  var classarray = myclass.split(" ");
  var currentClass = classarray[0];

  // If the polygon clicked (the trigger) already has the "clicked" class ( Not a "UNIQUE" , see below for those )
  if ($(this).hasClass(currentClass + 'clicked') && $(this).attr("data-sub") != "UNIQUE") {
    console.log("already selected");

    // Remove the "clicked" class.
    $(this).removeClass(currentClass + 'clicked');

    // Get the class and branch.
    var thisSub = $(this).attr("data-sub");
    var thisLevel = $(this).attr("data-level");

    // Filter elements based on level and sub branch.
    var foundAnother = false;
    var foundEl = [];

    // Filter function for each element of the current class.
    $("." + currentClass).filter(function() {

      // If the element has the same sub AND the same level as the current class.
      if (($(this).attr("data-sub") == thisSub) && ($(this).attr("data-level") == thisLevel)) {

        // If this element has the "clicked" class ( So another element that has same sub and level AND that was aleready clicked ).
        if ($(this).hasClass(currentClass + 'clicked')) {
          console.log("found another");
          foundAnother = true;

          // May be many elements... So push it to an array.
          foundEl.push($(this));
        }
      }

      // Keeping anyway all elements of the same sub in this filter. The found elements will be re-clicked later.
      if ($(this).attr("data-sub") == thisSub) {
        return true;
      }

      // For all element kept in the above, remove the "clicked" class. --- End filter function.
    }).removeClass(currentClass + "clicked");

    // Another check on each current class -> If there is element still having the "clicked" class except the "UNIQUE", set a flag.
    var checkAll = false;
    $("." + currentClass).each(function() {
      if ($(this).hasClass(currentClass + "clicked") && $(this).attr("data-sub") != "UNIQUE") {
        checkAll = true;
      }
    });

    // If flag was'n raised in the above, remove the "clicked" class for ALL elements.
    if (!checkAll) {
      $("." + currentClass).removeClass(currentClass + "clicked");
    }

    // If some elements were found having the same sub and level as the trigger.
    if (foundAnother) {
      console.log(foundEl.length);

      // Click them all !! (Kind of a short cut here!)
      for (i = 0; i < foundEl.length; i++) {
        foundEl[i].click();
      }
    }

    // This else is for "UNIQUE" elements that have "clicked" class. So if a  "UNIQUE clicked" element is clicked -> All the ellements having this current class should be unclicked.
  } else if ($(this).hasClass(currentClass + 'clicked') && $(this).attr("data-sub") == "UNIQUE") {
    console.log("UNIQUE FOUND");
    $("." + currentClass).removeClass(currentClass + "clicked");

    // Last else. If the trigger was not already clicked before.
  } else {

    // Add the appropriate "clicked" class.
    $(this).addClass(currentClass + 'clicked');

    // Markup error check... Since maybe it's the very first click it gets, have to check if it has all the required data atributes.
    if (typeof($(this).attr("data-level")) == "undefined") {
      console.log("data-level is missing");
      return;
    }
    if (typeof($(this).attr("data-sub")) == "undefined") {
      console.log("data-sub is missing");
      return;
    }

    // Get the class and branch from this target.
    var thisSub = $(this).attr("data-sub");
    var thisLevel = $(this).attr("data-level");

    // Filter elements based on level and sub branch.
    $("." + currentClass).filter(function() {
      if ((($(this).attr("data-sub") == thisSub) || ($(this).attr("data-sub") == "UNIQUE")) && ($(this).attr("data-level") < thisLevel)) {
        return true;
      }
    }).addClass(currentClass + "clicked");
  }
});

---

第一个答案 （不包括取消选择的能力）

如果你使用另一个属性，而不是 class , 区分“级别”和“分支”？

像这样：<polygon class='herbal' data-level="2" data-sub="A"...
所以每个不同的“分支”都有一封信......
而当“level”只有一个“branch”时，将data-sub设置为“UNIQUE”`。

看看这个updated Fiddle。

代码：

$("polygon").click(function() {

  var myclass = $(this).attr("class");
  var classarray = myclass.split(" ");
  var currentClass = classarray[0];

  // Add the appropriate "clicked" class.
  $(this).addClass(currentClass + 'clicked');

  // Markup error check.
  if (typeof($(this).attr("data-level")) == "undefined") {
    console.log("data-level is missing");
    return;
  }
  if (typeof($(this).attr("data-sub")) == "undefined") {
    console.log("data-sub is missing");
    return;
  }

  // Get the class and branch.
  var thisSub = $(this).attr("data-sub");
  var thisLevel = $(this).attr("data-level");

  // Filter elements based on level and sub branch.
  $("." + currentClass).filter(function() {
    if ((($(this).attr("data-sub") == thisSub) || ($(this).attr("data-sub") == "UNIQUE")) && ($(this).attr("data-level") < thisLevel)) {
      return true;
    }
  }).addClass(currentClass + "clicked");
});