Question

我有一个svg，我有多个扇区由扇区组成。扇区点击并改变颜色。我需要内部扇区来减轻外部扇区的点击事件

Here是相同的小提琴链接。

我尝试过如herbLvl1，herbalLvl2，herbalLvl3这样的课程，因此如果单击HerbalLvl2或HerbalLvl3，我可以在herbalLvl1上触发click事件。但是这些扇区已经有了一个类，我需要这些只有一个类来切换动态创建的类，如下所示：

    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]);将返回不同的值，因为类以下面的方式被删除：

页面加载：草药草药Lll1

点击选择：herbalLvl1 herbalclicked

点击取消选择：herbalclicked herbalLvl1clicked

等等，因为新添加的类最终会被追加。

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

Answer 1

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

您会注意到取消选择比仅仅选择更复杂为什么呢？

因为选择也会选择所有它＆＃34;父母＆＃34;。
但是取消选择可能不会取消选择其父母，因为可能选择了另一个兄弟...

所以要检查一下这个案子！

我在代码中包含了尽可能多的评论 ;）

你的老鼠会喜欢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来区分＆＃34;级别＆＃34;该怎么办？和＆＃34;分支＆＃34; ？

像这样：<polygon class='herbal' data-level="2" data-sub="A"...
所以每个不同的分支＆＃34; ...
的一封信当＆＃34;级别＆＃34;只有一个＆＃34;分支＆＃34;，将data-sub设置为＆＃34; UNIQUE＆＃34;`。

看看这个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");
});

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

1 个答案: