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

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时测试此标志->此方法有效，但前提是只有一个类具有自己的.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>