Question

这就是我所拥有的：

具有多行的SVG。这些具有作为CSS类的类型。例如： .pen1 .pen2 .pen3 .pen4。和.special

每行都有前四个之一，并且可以有.spcial！还有一些.special only行。

可以使用按钮来激活和停用这些类别。

我的问题是：

（A行具有.pen1，B行具有.pen1 .special，C行具有.pen2，D行具有.pen2 .special）

以下过程：

1）我单击.pen1的按钮：A和B消失
2）我点击.special按钮：D disapperas和B出现
3）我单击.pen1的按钮：A出现＆B消失

但是我需要在2）中消失，然后在3）中重新出现。

我当前的解决方案是，如果我按下.pen1的按钮，我将设置一个已按下的标志，并在按下.special时测试该标志->此方法有效，但前提是只有一个类具有自己的类并且。特殊班级

这是我的代码，

用于特殊切换：

if (this._pen1|| this._pen2|| this.pen3|| this.pen4 ){
      if (this.special) {
        if (this.pen1) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen1).hide(0);
        }
        if (this.pen2) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen2).hide(0);
        }
        if (this.pen3) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen3).hide(0);
        }
        if (this.pen4) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen4).hide(0);
        }
      } else {
        if (this.pen1) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen1).show(0);
        }
        if (this.pen2) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen2).show(0);
        }
        if (this.pen3) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen3).show(0);
        }
        if (this.pen4) {
          [...].find('svg .' + _PENSTYLES.special).not('.' + _PENSTYLES.pen4).show(0);
        }
      }
    } else {
      [...].find('svg .' + _PENSTYLES.special).toggle(0);
    }
    this.special= !this.special;

用于pen1-4切换：

    if (this.special) {
      [...].find('svg .' + _PENSTYLES.pen1).not('.' + _PENSTYLES.special).toggle(0);
    } else {
      [...].find('svg .' + _PENSTYLES.pen1).toggle(0);
    }
    this.pen1= !this.pen1;

我希望有人可以帮我解决多行问题。因为现在它们pen2会覆盖pen1并显示/隐藏其他所有东西。

Answer 1

我会给你一个提示。您始终可以为要切换的元素添加另一个同名类。 .pen1和.pen2都可以具有某些属性的“隐藏”类。希望对您有所帮助：）

Answer 2

这里是我认为您正在寻找的入门的简化。运行该代码段以查看其工作。

var hidden = [];

function toggle(classname) {
  if (hidden.indexOf(classname) > -1) {
    hidden.splice(hidden.indexOf(classname), 1);
    getElements(classname).forEach(function(ele) {
      ele.classList.remove("hidden");
    });
  } else {
    hidden.push(classname);
  }
  hidden.forEach(function(hide) {
    getElements(hide).forEach(function(ele) {
      ele.classList.add("hidden")
    });
  })
}

function getElements(classname) {
  return Array.from(document.getElementsByClassName(classname));
}

html {
  font-family: sans-serif;
}

.root {
  display: flex;
}

.root>div {
  flex: 0 0 80px;
}
button{
 width: 70px;
}

svg line {
  stroke-width: 2;
}

.special {
  stroke: red;
  stroke-dasharray: 5;
}

.pen1 {
  stroke: blue;
}

.pen2 {
  stroke: green;
}

.pen3 {
  stroke: goldenrod;
}

.pen4 {
  stroke: DarkOrchid;
}

text {
  font-size: 14px;
}

.hidden {
  display: none;
}

<div class="root">
  <div>
    <button onclick="toggle('pen1')">.pen1</button>
    <button onclick="toggle('pen2')">.pen2</button>
    <button onclick="toggle('pen3')">.pen3</button>
    <button onclick="toggle('pen4')">.pen4</button>
    <button onclick="toggle('special')">.special</button>
  </div>

  <svg width="400" height="200" viewBox="0 0 400 200">
  <rect width="400" height="200" fill="#efefef" />
  <line class="pen1" y1="20" y2="20" x1="0" x2="300" />
  <line class="pen2" y1="40" y2="40" x1="0" x2="300" />
  <line class="pen3" y1="60" y2="60" x1="0" x2="300" />
  <line class="pen4" y1="80" y2="80" x1="0" x2="300" />
  <line class="pen1 special" y1="100" y2="100" x1="0" x2="300" />
  <line class="pen2 special" y1="120" y2="120" x1="0" x2="300" />
  <line class="pen3 special" y1="140" y2="140" x1="0" x2="300" />
  <line class="pen4 special" y1="160" y2="160" x1="0" x2="300" />
  <line class="special" y1="180" y2="180" x1="0" x2="300" />
  <text x="310" y="20" alignment-baseline="middle">.pen1</text>
  <text x="310" y="40" alignment-baseline="middle">.pen2</text>
  <text x="310" y="60" alignment-baseline="middle">.pen3</text>
  <text x="310" y="80" alignment-baseline="middle">.pen4</text>
  <text x="310" y="100" alignment-baseline="middle">.pen1 .special</text>
  <text x="310" y="120" alignment-baseline="middle">.pen2 .special</text>
  <text x="310" y="140" alignment-baseline="middle">.pen3 .special</text>
  <text x="310" y="160" alignment-baseline="middle">.pen4 .special</text>
  <text x="310" y="180" alignment-baseline="middle">.special</text>
</svg>
</div>

切换具有多个值的选择器CSS

2 个答案: